Frequently Asked Questions

Weblab is an AI-powered visual editor for design. It connects to your existing codebase and lets designers and developers create interfaces using real components. Unlike generic AI code generators, Weblab constrains AI to your design system. Changes become pull requests engineers can merge directly, with no export, no translation, and no throwaway prototypes.

Weblab is for product teams with designers and an existing component library. Ideal users include design engineers, product designers working in code-forward teams, frontend developers who want visual tooling, and teams maintaining design systems who want AI that respects their existing work.

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. There's no handoff because designers and developers work in the same artifact. Changes become PRs, not specs. AI is constrained to your design system, so there's no brand drift.

Weblab offers: (1) An infinite canvas for visual design with real code running underneath, (2) AI that's constrained to your design system with no brand drift, (3) Real-time team collaboration with spatial comments, (4) Direct GitHub integration, so changes become mergeable PRs, (5) Support for your existing components, colors, and design tokens, (6) A visual interface that requires no coding for designers.

Weblab's AI is constrained to your design system. When you ask AI to make changes, it can only use components, colors, and tokens that exist in your codebase. This prevents brand drift and ensures outputs match your design system. You can point at elements visually rather than describing them in text, so the AI understands the exact selector, component, and styles.

Yes. Weblab has built-in team collaboration. Share your canvas, leave spatial comments, and work together in real-time. Multiple team members can view and edit the same project simultaneously. Changes sync to code and can be submitted as PRs.

Changes you make in Weblab become real code changes in your repository. When you're ready, submit them as a pull request for engineers to review and merge. No export, no copy-paste, no translation. The code is production-ready because it uses your actual components.

Yes. You don't need an existing codebase to use Weblab. From the dashboard, hit "Start blank" to scaffold a fresh Next.js or static HTML project, then build it out using the AI chat and visual canvas in the editor — generate pages, drop in sections, refine layout and copy. Prompt-based project bootstrapping and GitHub template imports are on the roadmap.

Weblab is model-agnostic. Choose between Claude Opus 4.8 and Sonnet 4.6, GPT-5.5, Gemini 3.1 Pro, DeepSeek V4 Pro, and Kimi K2.6 — or run local models via Ollama on the desktop app. You can also bring your own API key. Reasoning effort is configurable per chat, from Fast to Deep.

Today Weblab ships scaffolders for Next.js 15 (with Tailwind v4 and Turbopack) and plain HTML static sites. You can also connect any existing React codebase. Vite, Remix, Astro, and TanStack Start support is on the roadmap. We're built on a Babel JSX/TSX parser optimized for the React ecosystem.

Weblab supports all major CSS approaches: Tailwind CSS, CSS Modules, styled-components, Emotion, SASS/SCSS, Less, Vanilla Extract, Stitches, and plain CSS. Whatever styling approach your codebase uses, Weblab works with it.

Weblab works with React component libraries like shadcn/ui, Material UI, Mantine, Chakra UI, Radix UI, Ant Design, Headless UI, and Fluent UI. If your components work in your React/Next.js codebase, they work in Weblab.

Yes. Weblab connects to your codebase and lets you design with your real components: the buttons, cards, and layouts your engineers already built. AI suggestions use your actual component API, not generic alternatives.

Weblab connects directly to your GitHub repository. Changes you make are tracked as real code changes. When you're ready to ship, Weblab creates a pull request with your changes that engineers can review, comment on, and merge using their normal workflow.

Yes. Weblab ships a static HTML scaffolder out of the box — ideal for landing pages, portfolios, and marketing sites that don't need a framework. The visual editor and AI work the same way on static HTML as on React projects, so you get the full Weblab experience without spinning up a build pipeline.

Designers and developers work in the same artifact, so there's no handoff. Designers make visual changes on the canvas, which become real code changes. Developers can review and refine in their IDE. Changes are submitted as PRs for team review. Spatial comments let team members communicate directly on the canvas.

Yes. Weblab fits into your existing Git workflow. Changes become branches and PRs. Engineers review code in their normal tools. CI/CD pipelines work as expected.

The Weblab desktop app loads your local codebase and runs alongside Claude Code today, with Codex, Cursor, and Gemini support rolling out. You edit visually in Weblab while your AI agent works on the same files in the terminal — pairing visual control with autonomous code generation. You let the agent do the heavy lifting and step in with the canvas when you want pixel-level control.

Yes. Since Weblab works with real code, you can share your work directly as you created it on the canvas. Stakeholders see real, working UI, not static mockups that might not match the final product.

Weblab is open source under Apache 2.0 — you can self-host the whole thing for free from GitHub. The hosted cloud version has a free Basic plan with daily AI credits, and paid Pro, Launch, and Scale plans that unlock unlimited AI, custom domains, the "Built with Weblab" watermark removal, and team features. See the pricing page for the full breakdown.

Weblab was created by Ludvig Hedin. The goal: bridge the gap between design and development with a tool that lets you work directly on your real React components. Weblab is a continuous iteration towards the new state-of-the-art for collaboration in code.

Developers have historically been second-rate citizens in the design process. Weblab was founded to bridge the divide between design and development, and we wanted to make developers first-class citizens alongside designers. We chose to be open-source to give developers transparency into how we are building Weblab and how the work created through Weblab will complement the work of developers.