AI-native visual website builder

Use your own codebase or build in the cloud. Import your design system, work locally, or start from scratch.

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.

Mira

Kai

Sam

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.

Built open

Your model. Your terminal. Real code you own.

BuildOpus 4.8

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 visual design canvas that connects to your existing codebase. Designers drag real components onto an infinite canvas, make changes visually, and submit pull requests, with no coding required.

Traditional design tools create static mockups that must be rebuilt in code. Weblab works with your real components, so what you design IS the code. Changes become PRs, not handoff specs.

AI generators create new code from scratch. Weblab constrains AI to YOUR existing components, so outputs match your design system. No translation, no drift.

No. Designers use a visual canvas with familiar tools. Real code runs underneath, so you don't need to touch it unless you want to.

Yes. Weblab ships a static-HTML scaffolder for landing pages, portfolios, and marketing sites — no framework required.

Yes. Hit "Start blank" to scaffold a fresh project, then use the AI chat in the editor to generate pages, sections, and styles. No existing codebase needed.

Yes. The desktop app loads your local codebase and runs alongside your AI coding agent — design visually in Weblab while Claude Code does the heavy lifting in your terminal. Codex, Cursor, and Gemini support is rolling out.

Yes. Share your canvas, leave spatial comments, and work together in real-time. Changes sync to code and can be submitted as PRs for engineers to review.

React, Next.js, and any CSS approach (Tailwind, CSS modules, styled-components). Works with any component library.

Yes. Weblab is open source under Apache 2.0 — self-host the whole thing free from GitHub. The hosted cloud version has a free Basic plan with daily AI credits, plus paid plans for unlimited AI and custom domains.

The code you make with Weblab is all yours. Export it locally, publish to GitHub, or deploy to a custom domain.

What’s new

Changelog

v4.5Jun 17, 2026

Credits now reflect real usage

BillingCredits

v4.4Jun 13, 2026

AI wireframes: from a brief to a real site

AIWireframes

v4.3Jun 13, 2026

Import your designs straight from Figma

ImportFigma

v4.2Jun 12, 2026

Components: master/instance editing, properties, and variants

EditorComponents

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.

Start building

Weblab

Describe what you want to build

BuildSonnet 4.6

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.

Components

Your real components

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

ContentPosts

Collections

Posts24

Pages8

Authors5

Media37

New

Search posts…

New

TitleStatusUpd

CMS

Content lives next to your design

Manage posts, pages, and collections in one tidy panel. Edit a field and the canvas updates — no separate dashboard, no copy-paste.

Layers8

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.

Today

Earlier

History

Time travel for your designs

Every save is a version. Branch, restore, and compare without leaving the canvas.