01Canvas
Compose the interface directly.
Build responsive sections, move through layers and tune layout without turning the page into a prompt-and-wait workflow.
Loading
Loading workspace
Preparing your workspace and the latest project state.
Loading
Preparing your workspace and the latest project state.
Frame joins the visual speed of a builder with the structure developers expect from a repository. Build responsive pages, shape routes and content, inspect the blueprint, then export code your team can actually keep.
Canvas, configuration, blueprint and code are not four disconnected screenshots. They are four views of the same project state. Move through them and the workspace changes in place.
Build responsive sections, move through layers and tune layout without turning the page into a prompt-and-wait workflow.
Routes, content, translations, dependencies and export rules live beside the design instead of becoming cleanup work after it.
Review the structure implied by the visual work: pages, data, route boundaries, modules and other generated relationships.
Export React, Tailwind and Next.js structure into a codebase your team can edit, review and keep developing in its normal workflow.
The useful moment is before design is “finished” and before engineering wants a static handoff. Frame keeps those decisions connected while the product is still moving.
Product & design
Compose responsive sections, reuse blocks and keep structure visible while the page is changing.
Frontend
Routes, files, dependencies, content and translations are exposed before export instead of discovered afterwards.
Small SaaS teams
Useful when the same small team moves between product, UI and frontend instead of handing work across departments.
Frame treats export as part of the design process. Files, routes, translations and dependencies stay visible beforehand, so the final repository is a continuation of the work — not cleanup after a generator.
The working system
Frame is not a canvas with a code button attached. The visual document, responsive rules, reusable system, content, collaboration and delivery state are different views of the same project.
01 / 04
Direct manipulation stays close to the work: layers, frames, multi-selection, guides, snapping, grids, inline text editing, keyboard actions and precise inspector controls.
Shape the same page across viewports with breakpoint-aware overrides, relative sizing and layout flow while preserving one hierarchy.
Canvas that behaves like a serious editor
Responsive is part of the object, not a second design file
02 / 04
Turn repeated interface decisions into components and shared styling instead of duplicating pixels. Keep design tokens, variants and project-level visual rules available while editing.
Pages, navigation, CMS bindings, assets, redirects, metadata and translations remain project concerns. On Starter and above, AI translation uses only the workspace’s own OpenAI API key (BYOK), with no Frame-funded fallback key, and requires review before publication.
Components, tokens and themes stay reusable
Content, routes and localization remain visible
03 / 04
On Starter and above, invite collaborators, edit together with live presence, leave threaded block comments and move review work through branches instead of passing screenshots around.
Workspace permissions and pre-publish checks stay in the workflow. Activity audit trails and restore checkpoints require Pro or higher; Team adds team-governance controls.
Collaboration happens on the project itself
Security and project governance stay in the workflow
04 / 04
Blueprint, code-oriented handoff and readiness checks expose what the visual work implies. Developers can inspect structure and constraints before the project reaches Git.
Generate editable React, Tailwind and Next.js output, preview the result, and route publishing through supported deployment providers while keeping the exported project maintainable outside Frame.
Design decisions can be inspected before export
Export and publishing are delivery paths, not lock-in
The visual editor and React/Tailwind export remain available across plans. Plans change usage limits and unlock collaboration, recovery, governance and BYOK AI capabilities.
01 / plan
€0
Build, learn the workflow and ship smaller sites without turning the editor into a demo.
3
projects
1
people
20
exports / mo
250 MB
storage
Included features
02 / plan
€19
per month
More project space for solo work, client delivery and frequent exports.
15
projects
2
people
250
exports / mo
2 GB
storage
Included features
03 / plan
€49
per month
The complete working tier for teams reviewing, collaborating and shipping continuously.
Unlimited
projects
8
people
Unlimited
exports / mo
10 GB
storage
Included features
04 / plan
Custom
A larger operating surface for agencies and product teams that need governance and no hard usage ceiling.
Unlimited
projects
Unlimited
people
Unlimited
exports / mo
Unlimited
storage
Included features
Common conditions
AI translation is unavailable on Free. Paid plans use the workspace’s own OpenAI API key (BYOK); Frame does not provide AI credits or a fallback provider key.
Starter and Pro are offered worldwide to both individual/consumer and business/professional purchasers. Checkout requires an explicit purchaser classification.
Frame is intentionally narrower than an all-in-one platform. Its value comes from being specific about the handoff between visual work and frontend work.
Neither in the traditional sense. Frame is a visual frontend builder: you compose the interface on a canvas, while routes, content, translations, dependencies and export structure remain part of the project instead of disappearing behind the canvas.
An editable frontend project built around React, Tailwind and Next.js conventions. Export is meant to become normal repository work, not a hosted-only result or a screenshot handoff.
No. The workflow is built around code ownership. Frame helps form the project and hand it off; your team can keep changing the exported frontend in its usual tools.
Product designers who understand frontend constraints, frontend developers who like visual composition for some work, and small SaaS teams where product, UI and implementation overlap heavily.
No. Frame is the layer between visual composition and implementation. Detailed design exploration can still happen in design tools, and engineering judgement still belongs in the IDE and repository.
Yes. Blueprint and Configure expose what the canvas implies before a ZIP exists: pages, route boundaries, content models, i18n, files and other project decisions can be reviewed while the interface is still evolving.
No code generator replaces deployment review. Frame validates known project and export constraints, but your team should still run the generated project's tests, type checks, dependency/security review, accessibility checks and environment-specific configuration before production.