01 · Start
Getting started
From the dashboard to an editable and exportable project.
Create a project
Create a project from Dashboard → New project. The starting template contains a real editable page; you do not need to configure every setting before entering the editor.
- Use a recognizable project name.
- Choose the initial project/template type.
- Routes, design, resources and export settings can be changed later from Configure.
Templates
Choose a starting template when creating a project, then replace its content, pages, styles and structure in the normal editor. A template is a starting point, not a separate editing mode.
Editor layout
Layers and resources are on the left, the canvas is centered, and selected-layer properties live in the right inspector. Viewport state is separate from document state: zoom and pan never edit the page.
- Canvas: selection, move, resize, zoom, pan and visual editing.
- Layers: the real document hierarchy and export order.
- Inspector: content, style, layout and advanced properties.
- The floating toolbar keeps primary actions visible and groups View, Zoom and secondary actions into contextual menus.
- With multiple layers selected, the inspector becomes a real multi-edit surface: mixed values are explicit and shared changes apply to the full selection instead of silently editing only the focused layer.
Inspector
Select a layer to edit Content, Style, Layout and Advanced properties in context. Multi-selection exposes shared values and Mixed states so one change can update compatible selected layers together.
Saving and history
Document changes enter history; camera actions such as zoom and pan do not. Undo/Redo is for project edits, not viewport position.
If a version conflict appears, avoid editing the same project from multiple independent tabs and keep the session containing the newest valid changes.
02 · Editor
Canvas, selection and movement
The canvas behaves like a design tool while preserving the constraints required by an exportable website.
Zoom and pan
Ctrl/Cmd + wheel or trackpad zooms around the pointer. Space + drag or middle mouse pans. Zoom only updates the viewport and is frame-batched for smoother interaction.
- Shift+1 fits the page.
- Shift+2 fits and centers selection.
- You can type an exact zoom percentage.
Selecting elements
Click selects; Shift toggles multi-selection; Ctrl/Cmd + click deep-selects a nested layer. For overlaps, the context menu can select a layer under the pointer.
- Enter moves into the hierarchy; Shift+Enter returns to the parent.
- Tab and Shift+Tab traverse siblings.
- Ctrl/Cmd + drag performs deep marquee selection.
Real multi-edit
When multiple layers are selected, the inspector exposes shared properties and shows Mixed when values differ. Editing a shared property updates the full selection as one operation.
- Opacity, radius, background and text color can be edited together.
- When every selected container uses Stack/Grid, shared gap and padding become available.
- When all layers share a compatible text field, Shared text lets you edit that content in bulk.
- Match width, height or size uses the focused layer as the reference.
Move and reparent
When a layer enters another container, Frame preserves its visual dimensions by default. Moving into a Stack/Grid should not automatically stretch the item to the full container size.
- Fill is preserved only when explicitly selected.
- Stretching parents do not force a reparented inherited-size child to stretch.
- Secondary UI is hidden while dragging; only the destination guide remains.
Containers, Stack and Grid
Containers define child flow. Free keeps absolute positions; Auto/Stack places children along an axis; Grid arranges children in rows and columns.
- Fixed preserves a child dimension.
- Hug follows content where supported.
- Fill consumes available space on the relevant axis and should be intentional.
Tidy up and suggested Auto layout
Frame can read free-position geometry and turn it into real web structure. Tidy up detects rows/columns, aligns centers and evens out gaps; suggested Auto layout chooses Stack or Grid.
- Shift+A creates Auto layout from the current selection.
- Ctrl/Cmd+Alt+Shift+A suggests Stack or Grid from the existing arrangement.
- Ctrl/Cmd+Alt+T tidies three or more free-layout sibling layers.
- These actions change the layout model exported as flex/grid; they are not only visual helpers.
Direct layout controls
Selecting a Stack or Grid exposes compact Gap and Padding controls on canvas. Type a value or drag the label horizontally to scrub spacing while watching the layout update.
- Scrubbing previews the DOM during the gesture and commits once on pointer-up so Undo is not filled with intermediate values.
- Hold Shift while scrubbing for larger increments.
- Stacks can also switch direction without leaving the canvas.
- Fixed, Hug and Fill remain available from the layer context menu.
- Alt+Shift+A removes Auto layout from the selected container.
Resize to fit and canvas focus
A free-layout container can resize to the bounds of its visible children, while canvas focus temporarily hides both side panels for more working space.
- Ctrl/Cmd+Alt+Shift+R resizes a free container to fit its contents.
- Ctrl/Cmd+Backslash toggles canvas focus mode.
Responsive guides and structure outlines
Guides show a web-oriented responsive column grid (12 columns on desktop, 8 on tablet and 4 on mobile). Structure outlines expose rendered layer boundaries without changing the document.
- Shift+G toggles responsive column guides.
- Ctrl/Cmd+Shift+O toggles structure outlines.
- Hold Control during drag or resize to temporarily bypass snapping.
- These are editor-only aids and are never emitted as HTML/CSS.
03 · Structure
Layers, frames, groups and components
Layers mirrors the page hierarchy used by the visual editor and export: containers/frames, groups, components and normal content layers stay in one inspectable tree.
Hierarchy, order and groups
Layers uses one virtualized tree: drag the type icon to reorder, nest or outdent a layer. Indentation represents real parent/child relationships and hovering a row highlights the same layer on canvas.
- Double-click or F2 renames; Ctrl/Cmd+R opens single or bulk rename.
- Shift selects a range and Ctrl/Cmd toggles layers in the current selection.
- Right arrow expands or enters children; left arrow collapses or moves to the parent. Alt/Option + click on the disclosure expands or collapses the full branch.
- Eye and lock controls stay visible only while active or while hovering the row.
- Right-click exposes grouping, Auto layout, ungrouping, child/sibling selection, branch expansion/collapse, copy ID and normal layer actions.
- Collapse keeps only the selected layer path expanded and closes the rest of the tree.
Replace a block without rebuilding placement
Replace block is available from Layers, canvas, the inspector and Ctrl/Cmd+K. It changes the block type/base content while preserving the destination's placement.
- Keeps the destination layer ID, geometry, sizing and responsive overrides.
- Preserves compatible appearance/state and common content when the replacement supports it.
- Candidates are filtered by current-parent placement rules and child-container compatibility.
- For elements that should remain linked across usages, use Components instead of Replace block.
Components and instances
Turn a reusable layer into a component with Ctrl/Cmd+Alt+K or from the Components panel. Instances remain normal web trees while keeping an editor link to the main component.
- Changes to the main component synchronize to its instances without changing the page's exportable structure.
- Local prop/style changes on an instance are tracked as overrides and survive synchronization.
- The instance inspector consolidates safe nested content properties—text, labels, href, alt and simple booleans—so you do not need to drill into every layer.
- Reset discards overrides; Detach keeps the current result and removes the link; Go to main navigates to the source.
- The Components panel lets you search local components and insert instances into compatible destinations.
- Add variant creates another editable main in the same component set; instances can switch variants from the inspector while preserving compatible overrides.
Variants
Use variants to keep related component states in one set. An instance can switch variant while compatible local overrides remain attached to that instance.
Layer IDs
Every layer requires a unique ID for selection, history, bindings, collaboration and export. Missing or duplicated IDs are repaired automatically while inserting or normalizing the tree.
- Technical IDs are not shown on every row.
- Right-click → Copy layer ID when debugging or contacting support.
- You can paste an ID into Layers search to locate a layer without showing IDs on every row.
- Automatic ID repair does not create a separate Undo step.
Layer issues
Actionable issues use one neutral indicator and count rather than unexplained red/yellow dots. Select it to open the inspector section where the issue can be fixed.
- Assets or CMS → Content.
- Raw colors or contrast → Style.
- Overflow or invalid placement → Layout.
- Accessibility → Advanced.
Hidden and locked no longer count as issues because they are explicit user-controlled states.
Invalid placement
Some blocks cannot live inside every parent because that would generate invalid structure or layout. Frame tries a safe insertion automatically; if no sensible destination exists, it keeps the block out of the invalid target and explains why.
04 · Responsive
Responsive and design system
Design one page for multiple viewport sizes and keep reusable visual decisions consistent across the project.
Breakpoints
Switch desktop, tablet and mobile from the editor toolbar. Properties that support overrides can vary by breakpoint while keeping one layer and shared base content.
Overflow
A layer outside the usable width can create horizontal scrolling or clipping. The Layers issue indicator opens Layout so dimensions, position, sizing and constraints can be reviewed.
- Avoid fixed widths wider than the mobile viewport.
- Prefer Fill/Hug in stacks when the intended layout is fluid.
- Check every breakpoint before exporting.
Spacing and snapping
Guides appear while moving or resizing to align edges and spacing. They belong to the editor viewport and are never exported as document elements.
Design tokens and themes
Configure reusable color, typography, spacing, shadow, variable and theme values under Configure → Design, then apply them from supported editor controls instead of repeating raw values layer by layer.
05 · Content
Content, CMS, assets and forms
Manage static content, dynamic bindings, media, localization and forms without mixing them with page geometry.
Text and content
Select a content layer to edit properties under Content. When a block supports inline editing, text can also be edited directly on canvas.
Images and resources
Assets can be managed/local or external. Provide alt text when an image conveys meaning and review the resource state before publishing.
Content bindings
Content bindings are managed from Content. Layers reserves its issue indicator for actionable problems so a CMS-bound layer does not look broken merely because it is dynamic.
CMS and dynamic content
Use Content to connect supported fields to dynamic content and review CMS readiness before preview or publish. The visual structure remains editable while bound values come from the configured content source.
Localization and i18n
Use the project localization tools to manage supported locales and translated content, then review localized pages before sharing, exporting or publishing.
Forms
Insert form blocks and configure their fields and behavior from the editor. Review validation and delivery settings that apply to the chosen export or publishing workflow before launch.
06 · Site
Pages, routes, SEO and preview
Build the site map, configure public page metadata and inspect the result before sharing it.
Pages
Each page has its own visual tree. Creating, duplicating or deleting pages changes the project structure, not merely an editor view.
Routes
Configure routes and navigation through project tools. Before export, check for duplicate routes, links to missing pages and invalid slugs.
SEO and metadata
Page and project settings feed exported metadata where applicable. Review titles, descriptions, indexing and metadata before publishing.
07 · Delivery
Handoff, export and publish
Move from the visual project to developer review, editable code or a connected deployment without turning the canvas into a screenshot.
Pre-export checks
Projects are validated for structure, assets, configuration and quality. A blocking issue should lead to the relevant layer/setting instead of only exposing an error code.
Developer handoff
Open Code / Handoff to inspect the project from a developer-facing view, review handoff information and move from design review toward export without changing the source page just to communicate implementation intent.
React / Next.js export
Export generates structure, components, styles, content and configuration from the project. The result is intended to remain editable outside Frame.
Connected publishing
Connected publishing supports GitHub with Vercel, Netlify, Cloudflare Pages or a custom deployment webhook when the corresponding provider is configured. Review account, repository, branch, project and permissions before running the action; Cloudflare Pages connected publishing requires a static export target.
08 · Team
Collaboration, review, branches and history
Coordinate access, simultaneous editing and review while keeping change history and branch work visible to the team when those capabilities are available.
Roles and access
If an action is disabled, check workspace/project role first and plan availability second. Not every disabled control is an editor bug.
Real-time editing
Real-time collaboration is available on Starter and above. When enabled, presence and edits synchronize across collaborators. Avoid independent copies of the same project that do not share the active collaboration session.
Branches and history
Use project history to inspect saved change points. When branch/review tools are available for the project, create isolated changes, compare them and review before merging; availability follows the project plan and permissions.
09 · Help
Common errors and troubleshooting
Quick diagnosis for behaviors that often look like a canvas or project bug.
An item becomes huge after moving into a container
Check child sizing. Older inherited sizing inside Fill/Stretch containers could inherit the parent size. Current reparenting normalizes inherited sizing to Fixed/Start unless Fill was explicitly selected.
- Select the layer → Layout → sizing.
- Use Fill only when the item should consume available space.
- For an empty parent also review min-height and padding.
A layer cannot be dropped into a destination
The target may reject that child type, be locked, or create a cycle. Try the nearest parent container or inspect the exact hierarchy in Layers.
“Apply fix” used to appear when adding a block
That flow has been removed. Deterministic ID, metadata and safe-placement repairs are now applied automatically before insertion.
Zoom feels slow or elements jump
Zoom uses a frame-batched viewport transform and should not re-render every block. If it returns, check browser extensions, OS scaling and whether a heavy external element is forcing layout/paint.
Horizontal scrolling appears on mobile
Look for overflow issues from Layers. Common causes are fixed widths, absolute positions, transforms or gaps wider than the viewport.
Export is blocked
Open the failing check and fix the source rather than the symptom. Common causes include invalid structure, broken resources, incomplete configuration or references to missing pages/routes.
The project changed while I was editing
This can happen when independent sessions save different versions. Keep the session with valid changes, avoid multiple editing tabs without collaboration and reopen if the server rejects a stale version.
Duplicate or missing layer ID
Frame automatically repairs layer IDs while normalizing the tree and inserting content. For support/debugging, copy a layer ID from its Layers context menu.
Practical guides
Editor task guides
Practical editor workflows, from creating a page to preview and publish, using the labels visible in the product.
01
Create a page
Add a page from Pages, give it a clear name and route, then open it on the canvas before adding content.
- 1.Open Pages from the left rail.
- 2.Choose Add page and set the page name and route.
- 3.Open the new page and start from its empty canvas or chosen starting content.
Keep routes short and readable. You can refine SEO and metadata later without rebuilding the page.
02
Insert and edit an element
Insert a block into the selected destination, then edit its content and appearance from the canvas or Inspector.
- 1.Select the container that should receive the element.
- 2.Open Insert, choose a block and place it on the canvas.
- 3.Edit text directly when available, or use Content and Design in the Inspector.
If placement is rejected, choose the nearest compatible container in Layers instead of forcing an invalid hierarchy.
03
Select and multi-select
Use normal selection for one layer and Shift+click when several layers need the same edit.
- 1.Click a layer on the canvas to select it.
- 2.Use Shift+click to add or remove layers from the selection.
- 3.Use Ctrl/Cmd+click to reach a nested layer without repeatedly entering its parents.
With multiple layers selected, Mixed means the current values differ. Changing a shared property applies it to compatible selected layers.
04
Move and resize
Drag a selected layer to reposition or reparent it, and use its handles to change size while watching guides and snapping.
- 1.Drag the selected layer; the destination guide shows where it will land.
- 2.Drag an edge or corner handle to resize.
- 3.Hold Control during a drag or resize when you need to bypass snapping temporarily.
Moving an item into Stack or Grid keeps its visible size unless Fill was chosen intentionally.
05
Build with Auto layout and Grid
Use Stack for ordered rows or columns and Grid for two-dimensional arrangements that should respond as a group.
- 1.Select a container or a group of sibling layers.
- 2.Use Shift+A for Auto layout, or choose Stack/Grid from Layout.
- 3.Set direction, gap and padding, then choose Fixed, Hug or Fill intentionally for children.
Tidy up can regularize a free row or column before you convert it into structured layout.
06
Edit styles in the Inspector
Use Design for visual properties such as color, typography, radius, borders and effects while keeping layout decisions separate.
- 1.Select the layer you want to style.
- 2.Open Design in the Inspector and adjust the relevant section.
- 3.For repeated decisions, bind project tokens or theme values instead of copying one-off values everywhere.
Multi-select can apply compatible shared style changes to several layers in one edit.
07
Adapt a page for responsive breakpoints
Start from the main layout, switch breakpoint context and add only the overrides needed for smaller or wider screens.
- 1.Build the base structure on the main breakpoint.
- 2.Switch between Desktop, Tablet and Mobile from the canvas breakpoint controls.
- 3.Adjust layout, sizing or visibility where a breakpoint genuinely needs a different result, then preview each size.
Shift+G shows responsive guides. Avoid fixing a mobile problem with arbitrary offsets when Stack, Grid, wrapping or sizing expresses the intent better.
08
Reuse a component
Create a component for UI that should stay related across pages, then insert instances instead of maintaining independent copies.
- 1.Select the reusable layer and create a component with Ctrl/Cmd+Alt+K or from Components.
- 2.Insert an instance from the Components panel where it is needed.
- 3.Edit the main component for shared changes; use instance overrides only for local content or supported properties.
Detach only when that instance should stop receiving changes from its main component.
09
Work faster with shortcuts
Use keyboard commands for repeated editing actions while keeping the full shortcut reference available below.
- 1.Use Ctrl/Cmd+Z and Ctrl/Cmd+Shift+Z for Undo and Redo.
- 2.Use Ctrl/Cmd+D to duplicate and Shift+click for multi-selection.
- 3.Use Shift+1 to fit the page, Shift+2 to fit the selection and Space+drag to pan.
Shortcuts do not take over while you are typing in a field or editing text.
10
Preview before delivery
Use Preview to inspect the page as a visitor would see it without editor chrome, then return to fix anything that does not behave as intended.
- 1.Open Preview from the editor.
- 2.Check navigation, responsive behavior, content, forms and interaction states that matter to the page.
- 3.Return to the editor, make corrections and preview again before sharing or publishing.
Preview is a review step; it does not replace checking the responsive breakpoint contexts while you build.
11
Publish the current project
Run the project checks, review the selected publishing destination and only publish when the visible configuration is correct.
- 1.Open Publish from the editor tools.
- 2.Resolve any blocking checks and review the configured destination and project details.
- 3.Start publishing and wait for the visible result before treating the release as complete.
A failed or blocked publish should lead you back to the relevant project setting or check instead of being retried blindly.
From template to launch
Templates and website creation
An end-to-end website workflow: choose a starting point, build pages, adapt the brand, prepare SEO and forms, finish responsive behavior, connect a domain and publish.
01
Choose a starting template
Start with the project shape that matches what you are building, then treat the template as editable source rather than a locked theme.
- 1.From Dashboard, choose New project and name the project.
- 2.Choose Public site, Private app or Store, then review the export target and optional setup choices in Advanced.
- 3.Create the project, open Configure for project-wide choices and replace the starter content in the editor.
Limit · Templates establish starting pages and configuration only. HTML / CSS / JS export is available for Public site projects; Store projects use the Next.js target.
02
Build a page from scratch
Create a new route from Pages and assemble its structure with containers, layout and blocks instead of duplicating an unrelated page.
- 1.Open Pages from the editor rail and choose New.
- 2.Set a clear page name and route, open the page, then insert the first container or section.
- 3.Build the hierarchy in Layers and use Stack or Grid when the content should reflow as a group.
Limit · A project must keep at least one page. Route names should remain unique and valid for the chosen site structure.
03
Adapt content and branding
Replace starter copy and media first, then move repeated visual decisions into project tokens and themes so pages stay consistent.
- 1.Edit visible text, links and media directly from the canvas or Content controls.
- 2.Use Design for one-off layer styling and Configure → design tokens/themes for decisions reused across the project.
- 3.Review component instances after changing shared styles so local overrides still make sense.
Limit · Changing a token or main component can affect every place that references it. Detached copies and local overrides remain independent.
04
Configure routes and SEO
Give every public page a useful route and metadata, then set project-wide fallbacks for pages that do not need a custom value.
- 1.In Pages, review the route and open Page metadata for title, description, social image and crawler choices.
- 2.In Configure → SEO & runtime, set the site name, default title/description and canonical site URL used by the project.
- 3.Preview the page and review publish checks for missing or inconsistent metadata before launch.
Limit · A page-specific value overrides the project fallback. Sitemap/canonical output needs a usable public site URL; previewing metadata does not publish the page.
05
Add and prepare a form
Insert a form block, define the fields visitors need and review the submission behavior before treating it as launch-ready.
- 1.Insert a Form or Contact Form block and select it on the canvas.
- 2.Configure fields, required values, validation and the visible success/error behavior.
- 3.Choose the supported submission destination for the project and resolve any form readiness warning before preview or publish.
Limit · A form is not complete just because it renders. It needs at least one configured field and a submission path supported by the selected export/publishing setup.
06
Finish responsive behavior
Use the main layout as the base and add breakpoint-specific changes only where the page genuinely needs a different result.
- 1.Review the page on Desktop, Tablet and Mobile from the canvas breakpoint controls.
- 2.Prefer Stack, Grid, wrapping and Fill/Hug sizing before adding breakpoint overrides.
- 3.Preview the finished page and fix overflow, hidden content or navigation that does not fit the target width.
Limit · Breakpoint overrides change the selected context, not a separate copy of the page. Fixed widths and absolute positioning can still create overflow on smaller screens.
07
Connect and review a custom domain
Configure the publishing destination first, then use the domain/TLS section that appears when the connected provider exposes domain support.
- 1.Open Publish and select/configure the connected deployment destination.
- 2.After the deployment project is available, review Domains / TLS health for the reported custom domains.
- 3.Resolve any visible verification or certificate action and refresh health before sharing the custom address.
Limit · Domain controls only appear when the active provider and deployment expose them. If no custom domain is reported, Frame cannot present domain health for that destination.
08
Preview and publish the site
Use Preview for visitor-facing review, then publish only after the visible project checks and destination details are correct.
- 1.Preview key pages, navigation, forms and responsive layouts without editor chrome.
- 2.Open Publish, resolve blocking checks and confirm the provider, branch/environment and project destination shown in the panel.
- 3.Start publishing and use the visible publication result/history before treating the release as complete.
Limit · Preview is not a deployment. A publish can remain blocked, queued, fail or require another provider action; use the status shown by Frame rather than assuming success after clicking Publish.
Team workflow
Collaboration and workflow
Visible workflows for inviting, editing together, reviewing, sharing, handing off and recovering work in Frame.
01
Invite someone to a project
Open Collaboration & access from the editor when another person needs project-level access without changing the whole workspace.
- 1.Open Collaboration & access and enter the collaborator’s email address.
- 2.Choose Viewer or Editor for this project, then send the invitation.
- 3.Review pending invitations from the same panel and revoke one if it should no longer be used.
Availability · Project access changes are managed by a workspace owner. A person who already belongs to the workspace can receive project access directly instead of a new pending invitation.
02
Understand roles and visible access
Workspace membership and project access are shown separately so you can tell whether someone can only view, can edit, or owns the workspace.
- 1.Use Settings → Members to review workspace members, pending invitations and the role shown for each person.
- 2.For Editors, review the visible Design and Content capabilities before changing access.
- 3.Use Collaboration & access inside a project when that project needs a Viewer or Editor access level different from the workspace default.
Availability · Owners manage membership and access changes. Viewers are read-only; Editors can change the areas granted to them; Owner remains the workspace-management role.
03
Edit with live presence
When simultaneous editing is enabled, collaborators can see who is online and see remote cursors or selections on the same breakpoint.
- 1.In Collaboration & access, choose Edit together in real time when the project and plan allow it.
- 2.Use Online now to confirm who else is connected before making coordinated changes.
- 3.On canvas, use the collaborator name attached to a remote cursor or selection to understand who is working in that area.
Availability · Real-time simultaneous editing is available on Starter or higher. A project can instead use One editor at a time, which keeps project access while avoiding simultaneous editing.
04
Discuss a block with comments
Attach feedback to the selected block so the discussion stays next to the work being reviewed instead of becoming page content.
- 1.Select the relevant block and open its Comments panel.
- 2.Write the comment and use an available @mention when a specific collaborator should see the context.
- 3.Reply in the thread, then Resolve it when the point is addressed; Reopen remains available if the issue returns.
Availability · Collaboration comments are available on Starter or higher. Comment actions can be read-only when your current project access does not allow edits.
05
Work through the review queue
Use the collaboration review view to find unresolved feedback, mentions and items that need another look without scanning every block manually.
- 1.Open project Activity / review and start with Unresolved to see the current review queue.
- 2.Switch to Resolved, Mentions, Stale or Recent when you need a narrower review view.
- 3.Choose View block to return to the affected canvas item, or Activity to inspect the surrounding project timeline.
Availability · Review reflects the comments and project activity available to your account. An item can remain visible as needing review even when its original block was removed.
06
Review isolated work with branches and history
When branch tools are available, keep a set of changes separate, bring it up to date, request review and merge it only after the required review state is satisfied.
- 1.Open the branch review workspace and inspect the visual changes before asking someone to approve them.
- 2.Pull the current main state when needed, choose approvers and request review; reviewers can Approve or Request changes and comment on a selected change.
- 3.Merge an approved branch when your role allows it. Use History separately to inspect saved versions and compare earlier project states.
Availability · Branch/review controls appear only when that workflow is available to the project and your role. Merge is an owner action; approval is limited to selected approvers.
08
Prepare developer handoff
Use Dev handoff to communicate implementation context from the selected layer and move design review toward code without rewriting the page as documentation.
- 1.Open Code / Dev handoff and select the layer whose implementation context you want to review.
- 2.Review the layer details and add handoff annotations when implementation intent needs to be explicit.
- 3.Mark the handoff ready only when its review state is prepared, then use the handoff workspace or export flow for the next developer step.
Availability · Handoff information describes the current project and selected layer. It does not make source-code changes flow back into the canvas automatically.
09
Recover an earlier project version
Use History when a reviewed change needs to be compared with or restored from an earlier saved project state.
- 1.Open History and select the snapshot you want to inspect; compare its pages, blocks, routes and resources with the current project.
- 2.Review the restore safety summary and any confirmations shown for changes that would be replaced or removed.
- 3.Use Restore only after the required confirmations are complete; the restored event then appears in project activity.
Availability · Restore is disabled for read-only access and can remain blocked until its safety checks and required confirmations are satisfied. You can export a selected version without restoring it.
Code and integrations
Export and Developer
Public contracts for exporting code and integrating applications without depending on Frame internals.
01
Choose the export target
Configure → Export lets you generate a project for Next.js App Router, React + Vite, Astro + React, or framework-free HTML / CSS / JS.
- 1.Open Configure → Export and choose the target that matches where the code will run.
- 2.Review the capability matrix before downloading; changing the target also updates the generated project structure.
- 3.Keep the generated styling layer with the export. Frame uses its Tailwind/CSS-variable styling contract where the selected target supports the package-based runtime.
Contract · Store projects export to Next.js. Private app projects cannot use the HTML target. HTML is a public-site, static target and does not include package-based or server runtime features.
02
Read the generated project structure
The ZIP is a normal source project whose exact files follow the selected target and the features used by the project.
- 1.Start with README.md and frame.manifest.json when they are present; they summarize setup and the generated artifact map.
- 2.Next.js exports use App Router pages; React/Vite exports use the src application tree; Astro exports use src/pages; HTML exports emit index.html and static assets.
- 3.Generated components, styles, content data and public assets are emitted only when the project needs them, so two exports can have different trees.
Representative paths
Next.js app/page.tsx
React/Vite src/App.tsx
Astro src/pages/index.astro
HTML index.html + assets/frame.cssContract · Do not depend on a folder existing unless the current export contains it. The export target and project features are the contract; optional generated files are feature-dependent.
03
Check capability differences before export
Frame shows Full, Partial or Unsupported per target so server-dependent features are not silently presented as portable everywhere.
- 1.Use the Export capability matrix for pages, CMS, dynamic routes, forms, Resources, auth, commerce, i18n, packages and server runtime.
- 2.Prefer Next.js when the project needs the complete server feature set, including commerce.
- 3.For React/Vite or Astro, review features marked Partial before deployment; HTML remains intentionally static and has no package or server runtime.
Contract · A Partial capability requires the compatible deployment path shown by Frame. Unsupported means the selected target does not generate that capability and you should change target or remove the dependency before relying on it.
04
Use the public Developer API v1
The Developer portal publishes an OpenAPI 3.1 service description and a stable v1 API for read-only workspace and project metadata.
- 1.Open Settings → Developer and use the OpenAPI link as the canonical machine-readable description.
- 2.Send a Bearer credential created as a service-account key or obtained through the supported OAuth flow.
- 3.Request workspace metadata with workspace:read or one project with project:read and the matching project grant.
Workspace request
GET /api/developer/v1/workspace
Authorization: Bearer frame_sa_…Contract · The current v1 surface is read-only and limited to the documented workspace and project reads. Per-credential limits are Free 120, Starter 300, Pro 600 and Team 1200 requests/minute. Deprecations provide at least 180 days of migration notice; breaking changes require a new major path version.
Bearer frame_sa_…
05
Create a service account for server-to-server reads
Workspace owners can create service accounts in Settings → Developer with explicit read grants instead of using a personal session.
- 1.Choose workspace:read for workspace metadata or project:read with a project ID for a project-specific grant.
- 2.Create a named key, optionally set its expiry, and copy the token when Frame reveals it.
- 3.Rotate by adding a replacement key and revoke old keys or the whole service account when access is no longer required.
Contract · Service-account keys are Bearer credentials and the full token is revealed once. Current grants are read-only: workspace:read and project:read. Key expiry can be set from 1 to 3650 days.
06
Connect a user with OAuth
Public OAuth apps use Authorization Code with PKCE so a user can approve the same bounded Developer API read scopes for an external application.
- 1.Register the app in Settings → Developer with an exact HTTPS redirect URI and the scopes the app needs.
- 2.Send the user through the localized OAuth authorization page with PKCE S256, then exchange the returned code at the documented token endpoint.
- 3.Use the resulting frame_ou_… Bearer token against Developer API v1 until it expires or is revoked.
Public OAuth endpoints
GET /{locale}/oauth/authorize (Authorization Code + PKCE S256)
POST /api/oauth/token (form-encoded code exchange)Contract · Supported scopes are workspace:read and project:read. Redirect URIs must match a registered HTTPS URI exactly. Authorization codes expire after 5 minutes and are single-use; access tokens expire after 1 hour.
07
Receive supported Developer webhooks
The Developer portal can deliver service-account lifecycle events to an HTTPS receiver and exposes delivery status for each configured webhook.
- 1.Create a webhook, choose from service_account.created, updated, revoked, key_created or key_revoked, and select between 1 and 8 delivery attempts.
- 2.Store the signing secret when it is revealed and verify each request before processing its JSON body.
- 3.Use delivery logs to inspect event, HTTP status and attempt count; disable the webhook or rotate its secret when needed.
Signature contract
x-frame-timestamp: …
x-frame-delivery-id: …
x-frame-event-id: …
x-frame-signature: sha256=…
HMAC-SHA256(secret, timestamp + '.' + deliveryId + '.' + rawBody)Contract · Webhook delivery is at-least-once: receivers should be idempotent by delivery/event ID. Frame signs the exact body with HMAC-SHA256 and sends the signature as sha256=…; rotating the secret invalidates the previous signing secret.
08
Run and own the exported code
An export is a handoff to a normal codebase: install it, review its generated configuration and continue development with your usual source-control workflow.
- 1.Read the generated README for the selected package manager, environment variables and target-specific setup.
- 2.For package-based targets, install dependencies and run the generated lint, typecheck and build scripts before deployment.
- 3.Commit the exported project to your own repository and treat later Frame exports as explicit new handoffs rather than an automatic two-way sync.
Generated project checks
pnpm install
pnpm run lint
pnpm run typecheck
pnpm run buildContract · Frame does not automatically merge source-code edits back into the canvas or merge a later export into an edited repository. Review diffs when replacing or combining generated code with application changes.
Workspace
Account and billing
Public guidance for profile, workspace and plan controls available from Settings.
Profile and account
Settings → Profile is the user-facing place for display name, avatar URL, language and time zone. It also shows the signed-in identity and authentication provider.
- Save profile changes from the Profile panel.
- Use Sign out when you want to end the current session.
Workspace
Settings → Workspace shows the current workspace name, plan, storage, project count and member count.
- Workspace renaming is available to the workspace owner.
- Member roles and invitations are documented under Collaboration.
Plan, usage and billing
Settings → Billing shows the current plan, available billing intervals, plan limits and current usage when billing data is available.
- Paid-plan checkout is available only when billing is configured for the workspace.
- Billing management and plan changes follow the controls visible in this panel; Team uses its sales-assisted path.
- Buyer type is selected explicitly during paid-plan checkout rather than inferred from profile data.
Editor shortcuts
Shortcuts do not run while typing in a field or editing text. On macOS use Cmd where Ctrl/Cmd is shown.
Frequently asked questions
Short answers to common editor behavior and product decisions.
Does zoom affect design or export?
No. Zoom and pan are editor viewport state and do not change geometry, styles or exported code.
Why can’t one layer be placed inside another?
Placement rules prevent hierarchies that do not make sense for HTML, layout or export. When a deterministic safe alternative exists, Frame redirects or wraps automatically.
Is hiding a layer the same as deleting it?
No. Hiding keeps the layer in the project while changing visibility. Deleting removes the node and may affect bindings or references.
What does the issue indicator in Layers mean?
There is an actionable check for that layer. You do not need to learn a color code: select the indicator and Frame opens the relevant inspector section.
Can I copy a layer ID?
Yes. Open the layer context menu in Layers and choose Copy layer ID. IDs stay out of normal rows to keep the tree readable.
Does exported code depend on canvas position or zoom?
No. Export uses document structure, properties, content, layout and project configuration; editor camera state is ignored.
What does Replace block preserve?
It preserves the destination layer identity and placement: ID, geometry, sizing and responsive overrides, while keeping compatible appearance/state and common content. Invalid replacements for the current parent are filtered out.
What is the difference between a component and a copy?
A copy is independent. An instance stays linked to its main component: it receives main-component changes except for properties you override locally; you can reset or detach it when you need independence.
What should I check before publishing?
Responsive behavior across breakpoints, overflow, assets and alt text, routes/links, metadata, export checks, permissions and integrations.
Comments and review
Collaboration comments are available on Starter and above. Use them to discuss review points in project context; comments remain collaboration data rather than page content.