A fully open-source, MIT-licensed drag-and-drop editor that you can embed in your own app.
Powered by clean React components, a Webflow-style class system, AI integrations,
and an embeddable SDK designed for teams who want total control.
📘 Documentation • 🚀 Demo • 💬 Discord • 📦 NPM
- What is Webtir?
- Why Webtir Exists
- Key Capabilities
- Feature Overview
- Architecture
- Embedding Webtir
- Installation
- White-Label & Support
- License --> $999/yr for an MIT-extended white-label friendly embeddable-use license is available
Webtir is an open-source visual editor you can drop into your product.
It’s the missing “builder layer” for modern SaaS:
- Drag-and-drop UI components
- Real CSS class system
- Responsive styling
- Data binding
- Real-time collaboration
- Optional AI generation (bring your own model)
- Completely embeddable inside your own platform
Webtir is MIT-licensed, self-hostable, white-label friendly, and works with
platforms like Lovable, v0, Cursor, DIY React apps, and enterprise stacks.
Every product team eventually realizes they need:
- a page builder
- a template editor
- a dashboard customizer
- an internal tool designer
- a visual component composer
But building a drag-and-drop editor from scratch takes 18+ months and becomes
a never-ending maintenance burden.
Webtir gives teams a powerful, customizable editor without the lock-in.
You bring your components, your data, your AI models…
and Webtir becomes the editor layer that sits on top.
- 🔧 Use your own React components
- 🎨 Class-based styling like Webflow
- 📱 Responsive breakpoints
- 🔌 Data integration with Supabase, REST, GraphQL
- 💬 Plug in your own AI (OpenAI, Gemini, local, custom endpoints)
- 🧩 Preview + code mode
- 🧵 Real-time collaboration
- 🔒 MIT license: fork it, self-host it, white-label it
Webtir loads from your component drawer so users drag the same primitives that power your real app.
Buttons, cards, lists, sections — map props once and let teams assemble interfaces safely.
Margin, padding, flexbox, grids, backgrounds, filters, borders, shadows —
all through a reusable CSS class system, not inline chaos.
Perfect for teams who demand consistent design.
Bind to Supabase, Postgres, REST, GraphQL, Airtable, Stripe, or internal APIs.
Every component can receive real data, actions, and state — without reinventing your backend.
Webtir exposes a visual + code-based AI layer where you plug in
OpenAI, Gemini, local models, or internal endpoints.
Generate layouts, rewrite sections, or modify styles by prompt.
Drop Webtir into any app with a small SDK and full sandboxing.
Self-host, rebrand, fork, modify — no lock-in. Optional commercial support.
Give Webtir a JSON schema and it automatically knows
how to render controls for your components and props.
Reusable classes with breakpoints, tokens, variables, pseudo states, and effects.
Searchable drawer mapped to your React component library with auto-generated forms.
Bind props to queries, variables, API calls, or server functions.
Ask AI to generate sections, adjust spacing, or rebuild blocks.
View diffs, commit changes, or export templates as real code.
Webtir plays nicely with all modern AI tools and lets you bring your own stack.
A Webflow-inspired style engine with:
- Class rules
- Pseudo states
- Responsive layers
- Tokens
- Space / Layout / Size / Effects
- Deterministic CSS generator
Auto-scans your component library via schema or TypeScript definitions.
Plugs into your APIs, DBs, and environments.
Provide your own API keys and models — Webtir is model agnostic.
import { WebtirEditor } from "@webtir/sdk";
<WebtirEditor
components={myComponentLibrary}
dataSources={myDataSources}
aiProvider={myAIConfig}
/>