AI-native visual website builder

Design on your real website, right on your Mac. Free, open source and local-first. Works with Claude Code, Codex and OpenCode.

For Macs with Apple Silicon. No account needed.

Home

HalcyonBook a demo

Trusted by 1,000+ teams

Clarity for your entire stack

Real-time analytics that turn raw activity into decisions your team can act on.

Workflow control

Run your system, not just tasks

Coordinate actions, automate decisions, and keep everything moving without constant manual input or switching between tools.

Flow visibility

Track how tasks move across stages

Execution speed

See how fast actions get completed

Smart alerts

Catch issues before they grow

Incoming Flow

New order detected

LiveTrigger

Source: API / Webhook

Region: Global

Status: Active

Decision Layer

Routing & validation

PriorityChecksFilters

ExecutionSynced

Action completed and pushed across connected services

SuccessDistributed

Need help?

Frequently asked questions

Find quick answers about our pricing, onboarding, and performance tracking tools.

See your data clearly

Turn raw activity into decisions with real-time analytics built for fast-moving teams.

Halcyon/

main

100%

58%

Layers14

HomeHeadline

Home

Navigation

Logo

Nav Links

Book a demo

Hero

Eyebrow

Headline

Subhead

Email Form

Workflow

FAQ

CTA

Footer

Headline

HeadlineH1

Flow

Align

Gap

24px

Padding

32px

24px

Margin

auto

0px

Dimensions

1280px

auto

Constraints

Min W0px

Max W∞

Color

FFFFFF

100%

Font

Inter

Semibold

48px

1.1

-0.02em

Alignment

Color

0A0A0F

100%

Claude Opus 4.8

Design with AI on an infinite canvas

Craft, preview, and iterate with AI to ship better websites and prototypes faster than ever.

Continue

Button.tsx

<button className="rounded-lg bg-fg px-4 py-2">
  Continue
</button>

Native design tool features that work 1:1 with code.

A true developer tool for designers, helping you code without knowing anything about code.

Design, Code & AI,
Side-by-side

Design, code, and AI in one canvas. What you move on screen is the file you ship.

Download for Mac

Weblab

Describe what you want to build

BuildOpus 5.5

AI Assistant

AI that understands context

Reference images, designs, and docs in chat. AI sees what you see, with no more explaining from scratch.

Canvas

Manipulate elements directly

Drag, resize, and arrange elements directly on the canvas. See changes appear in real code instantly.

Weblab
Home.tsx
Chat.tsx
"use client";

import React, { useState } from "react";
import Navigation from "./Navigation";
import SupportChat from "./SupportChat";

export default function Dashboard() {
  const [activeTab, setActiveTab] = useState("support");

  return (
    <div className="flex h-[600px] border rounded-lg overflow-hidden">
      <div className="w-64 border-r">
       <Navigation activeTab={activeTab} onSelectTab={setActiveTab} />
      </div>
      <div className="w-80 border-l">
        <Chat />
      </div>
    </div>
  );
}

Code

Real code, live next to your canvas

Edit components in a proper editor with syntax highlighting and multi-file tabs. Every visual change writes back into the file you'd ship.

Weblab

Components

Your real components

Reuse your existing design system: buttons, cards, navs. Live components, not screenshots.

Weblab

Layers

Structure

Navigate your code as layers

A live tree of your DOM. Click any node to jump to it on the canvas, with no inspector hunting.

Built open

Your model. Your terminal. Real code you own.

BuildOpus 5.5

Model agnostic

Switch between leading models as you need. Pick the one that fits the task.

Your stack, your terminal

Real code, real terminal

Install, build, test, and deploy from your own terminal. No lock-in, no black box.

Tokens

Colorsbrand · #0F9BFF

Type scale

AgDisplay · 32

AgHeading · 20

AgBody · 14

Spacing

Radius

full

Design tokens

Your design system, wired

Colors, type, spacing — defined once, used everywhere. Edit a token, every component follows.

Frequently
asked questions

Weblab is a free Mac app that puts a visual design canvas on top of your website while it runs on your computer. Click an element, change it visually or describe the change, and your coding agent edits the real source files.

Your own coding agent: Claude Code, Codex or OpenCode. Weblab runs it on your Mac with your own account. There are no Weblab credits or plans.

Any site you can run on your computer with a dev server, like Next.js, Vite, Remix, Astro, Rails or plain HTML. You can also clone a site from GitHub right in the app.

No. You design on the canvas and describe changes in plain words. Real code runs underneath, so you only touch it if you want to.

Macs with Apple Silicon (M1 or newer) for now. Windows and Linux are not available yet.

Weblab runs on your Mac and has no account or cloud of its own. Your project stays in your own folder. Your coding agent sends what it needs to its own AI provider, as it always does.

Yes. Weblab is free and open source. You only pay for your coding agent's own plan, if it has one.

You do. Weblab edits the files in your own project, so nothing is locked in. Commit, push and deploy it however you like.

What’s new

Changelog

v5.3Oct 21, 2026

Organize sites on your Mac

DesktopSites

v5.2Oct 3, 2026

Simple and advanced editing

DesktopBeta

v5.1Oct 1, 2026

Project folders and details

ProjectsDesktop

v5.0Sep 29, 2026

Help when a local site will not start

DesktopAI

Ready to stop rebuilding?
Your design system, on a canvas.

Design, Code & AI,
Side-by-side

Design, code, and AI in one canvas. What you move on screen is the file you ship.

Download for Mac

Weblab

Describe what you want to build

BuildOpus 5.5

AI Assistant

AI that understands context

Reference images, designs, and docs in chat. AI sees what you see, with no more explaining from scratch.

Canvas

Manipulate elements directly

Drag, resize, and arrange elements directly on the canvas. See changes appear in real code instantly.

Weblab
Home.tsx
Chat.tsx
"use client";

import React, { useState } from "react";
import Navigation from "./Navigation";
import SupportChat from "./SupportChat";

export default function Dashboard() {
  const [activeTab, setActiveTab] = useState("support");

  return (
    <div className="flex h-[600px] border rounded-lg overflow-hidden">
      <div className="w-64 border-r">
       <Navigation activeTab={activeTab} onSelectTab={setActiveTab} />
      </div>
      <div className="w-80 border-l">
        <Chat />
      </div>
    </div>
  );
}

Code

Real code, live next to your canvas

Edit components in a proper editor with syntax highlighting and multi-file tabs. Every visual change writes back into the file you'd ship.

Weblab

Components

Your real components

Reuse your existing design system: buttons, cards, navs. Live components, not screenshots.

Weblab

Layers

Structure

Navigate your code as layers

A live tree of your DOM. Click any node to jump to it on the canvas, with no inspector hunting.

AI-native visual website builder

Clarity for your entire stack

Run your system, not just tasks

Frequently asked questions

What is this platform built for?

Do I need a credit card to start?

How does billing work?

Is there a discount for annual plans?

How fast is deployment?

What about uptime?

Can I invite my whole team?

Can I change plans later?

Where is my data stored?

Do you integrate with our existing tools?

See your data clearly

Design with AI on an infinite canvas

Native design tool features that work 1:1 with code.

Design, Code & AI,Side-by-side

AI that understands context

Manipulate elements directly

Real code, live next to your canvas

Your real components

Navigate your code as layers

Your model. Your terminal. Real code you own.

Model agnostic

Real code, real terminal

Your design system, wired

Frequentlyasked questions

Changelog

Ready to stop rebuilding?Your design system, on a canvas.

Design, Code & AI,Side-by-side

AI that understands context

Manipulate elements directly

Real code, live next to your canvas

Your real components

Navigate your code as layers

Your model. Your terminal. Real code you own.

Model agnostic

Real code, real terminal

Your design system, wired

Frequentlyasked questions

Changelog

Ready to stop rebuilding?Your design system, on a canvas.

Design, Code & AI,
Side-by-side

Frequently
asked questions

Ready to stop rebuilding?
Your design system, on a canvas.

Design, Code & AI,
Side-by-side

Frequently
asked questions

Ready to stop rebuilding?
Your design system, on a canvas.