Sitewright docs

Framer connection status

Shows the active transport (Server API or the Framer plugin), whether each one is configured and connected, what to do if not, the projects with a saved Server API key (framer_connect { project } switches between them), and what the project's Framer plan allows. Call it when a Framer tool fails.

No parameters.

Choose Framer transport or project

Switches how tools reach Framer, which project they edit, or both. transport: "server-api" (API key, headless, DSL + screenshots), "plugin" (the Sitewright plugin open in the editor; Plugin API only) or "auto" (everything through the connected plugin, the DSL through the Server API of its project; nothing runs while the plugin is not connected). project: when the user names another project, switch to it here, by name from framer_status's projects (only those have a saved key); the plugin follows only if it is open in that project. Returns the new status.

Project overview

Summarizes the connected Framer project: web pages with paths, design pages, counts of color tokens, text styles, components and CMS collections, and what its Framer plan allows (capabilities). Start here.

No parameters.

Read the editor selection

Returns the layers the user selected in the Framer editor (ids and names). Call it when the user says "this", "the selected one" or "what I picked", then read those ids with nodes_read and change them with design_apply. Works through the Sitewright plugin only, open in this project.

No parameters.

Wait for the user to pick layers

Waits (up to 25 s) for the user to select something new on the canvas and returns it: ask them to click the layer they mean, then call this. timedOut true means nothing new was picked in time; ask again or use selection_get. Works through the Sitewright plugin only, open in this project.

Select layers in the editor

Selects layers on the Framer canvas, to show the user what you changed or are about to change; [] clears the selection. Works through the Sitewright plugin only, open in this project.

Show a layer in the editor

Scrolls the Framer editor to a layer, a page or a CMS item, selecting it and zooming to it unless told not to: the way to point the user at a spot. Works through the Sitewright plugin only, open in this project.

Zoom to layers

Zooms the Framer canvas so the layers fit on screen, without selecting them. Works through the Sitewright plugin only, open in this project.

Who is signed in

The Framer user the connection works as: name, initials and avatar.

No parameters.

Read plugin data

Reads the small notes Sitewright keeps in the project or on a layer (plugin data): one key, or every key with its value. Only this plugin's own data. Works through the Sitewright plugin only, open in this project.

Write plugin data

Keeps a small note in the project or on a layer as plugin data (Framer allows 2 KB a key, 4 KB in all); null deletes the key. It never shows on the site: use it for state between sessions, e.g. when a sync last ran. Works through the Sitewright plugin only, open in this project.

Publish status

Where the site is published (production and staging URLs, when) and which pages changed since the last publish. Publish with project_publish, only when the user asks.

No parameters.

List deployments

The site's newest deployments: when, by whom, and whether they went live or failed.

Preview a publish

Shows what publishing would do, without publishing: whether it is blocked, the blocking errors and the warnings (with the layer's id when Framer names one), the pages (with their paths), components and other parts changed since the last publish, where it would go (production, staging or a branch preview) and the site's URLs. Use it before the user publishes, to fix what blocks or warns first, and to find the live URL for reference_screenshot. It never publishes: the user does, or project_publish when they ask. Needs the project's Server API key.

No parameters.

Publish the site

Publishes the site as it is in the editor: to staging when the project has staging on, otherwise live to visitors. Only when the user asks to publish; with the Server API key, check first with publish_preview. Returns the deployment's first status (optimization goes on after it) and the address; a failed status means Framer could not publish, tell the user.

No parameters.

List color tokens

Lists Framer color styles (tokens) as { id, path, light, dark }. path uses "/" folders like "Brand/Primary".

Create or update color tokens

Creates or updates color tokens by path in one batch (idempotent: unchanged tokens are skipped). Accepts hex, rgb(), hsl(), oklch() or CSS names for light and optional dark. Reference a token elsewhere as var(--token-<id>).

Delete color tokens

Deletes color tokens by path (every token at a path, if several share it) and whole folders (folders: ["Brand"] deletes everything inside, and so the folder). Tokens Framer refuses to delete come back in failed with the reason; unknown paths and folders in notFound.

Replace a color token everywhere

Points every layer that uses one color token at another, across the whole site or one page: fills, text colors, borders and gradients, in pages, components, design pages and layouts. dryRun lists what would change. Texts whose own runs name the token and text styles colored with it are listed apart (rewrite them with design_apply xml and text_styles_upsert). Undo takes it back. Needs the project's Server API key.

List text styles

Lists Framer text styles (presets) with font, sizes, color (token path or raw value) and breakpoint slots: each slot's label and the width it starts at.

Create or update text styles

Creates or updates text styles by path in one batch. Font family must exist (use fonts_search); color binds a token with { token: "Brand/Text" }. Only provided attributes change on existing styles.

Delete text styles

Deletes text styles by path (every style at a path, if several share it) and whole folders (folders: ["mcp-test/live"] deletes everything inside, and so the folder). Styles Framer refuses to delete, e.g. still used by text, come back in failed with the reason; unknown paths and folders in notFound.

List link styles

Lists link styles: how links in text look at rest, under the pointer (hover) and when they point to the page being viewed (current), with colors as a token path and the value it draws, the underline (decoration, its color, style, thickness and offset) and a highlight behind the text (background). Values a style does not set are left out, and Framer does not store decoration none, auto thickness or offset, or zero radius and padding. transition shows a tween a style still has. Needs the project's Server API key: link styles exist only in the DSL.

Create or update link styles

Creates or updates link styles by path in one batch; only the values given change, and null removes one. A link in text takes its look from its link style, not from the text: without one Framer draws it in its default blue. Make one per role (navigation, footer, links in body text) with color { token: "Text/Muted" }, a hover color, and on a menu of several pages a current color for the active item; then put linkStylePreset="<path>" on the text with design_apply. A new style needs color. Framer animates link styles only with tween easing, which Sitewright never writes, so colors change at once; transition: null removes a tween.

Delete link styles

Deletes link styles by path (every style at a path, if several share it) and whole folders (folders: ["Links"] deletes everything inside, and so the folder). Framer refuses to delete a style text still uses: it comes back in failed with the reason; styles_usage shows where it is used. Unknown paths and folders come back in notFound.

Show where styles are used

Shows which color tokens, text styles and link styles the site uses: for each, how many layers use it (a layer counts once across breakpoints) and where (page paths, components, design pages, layouts); a token also lists the text and link styles that bind it. What nothing uses comes back in unused. Read the whole site (no pagePath) before deleting or swapping a style: with pagePath it reads one page, and unused means unused there. Code files are not searched.

Search fonts

Searches fonts by family name: Framer's library with its weights and styles, and fonts uploaded to the project (source project) with the variants its text styles use. Framer swaps a weight the project lacks without an error; text_styles_upsert reports that as fontFallbacks.

Fonts in use

Lists every font family the project uses, with its weights and styles, the text styles that set it and how many layers carry it inline (on each page's main breakpoint): what to check before a font swap or a license question.

Create a page

Creates an empty web page at a path ("/about") or a design page (a canvas for drafts) by name. Build its content with design_apply; add breakpoints with breakpoints_add. Undo does not remove pages.

Delete a page

Deletes a web page by path or a design page by name, with everything on it. Undo cannot bring it back: delete only pages the user asked to remove or you created yourself. The home page cannot be deleted.

Duplicate a page

Copies a page with everything on it: a web page (path) to a new path (newPath, e.g. "/about-b"), keeping its breakpoints, their overrides and its settings; or a design page (designPage) under a new name (newName). Use it for a variant of a page (an A/B version, a landing page from an existing one) instead of rebuilding it with design_apply. The new path must be free. A web page copy is a draft by default, which publishing leaves out until the user turns the draft off; draft: false publishes it with the site. Works with or without the Server API key. Returns the copy's id, path or name, and whether it is a draft. Undo does not remove the copy: delete it with page_delete.

Read nodes

Reads a node (or the page root, or up to 50 nodes at once with nodeIds) with its children to a given depth, as XML by default: tags are node types, attributes are ids, names and DSL attributes, $-attributes are read-only metadata. Blocks and runs of a rich text show no id: theirs follow from position (v:<text id>:<n>, then :<m>). Edit the XML and send it back with design_apply xml. format "json" returns raw serialize(). Keep depth low and filter attributes on big pages. Without a Server API key it reads through the Plugin API: the same XML with fewer attributes, and the plain text of a rich text instead of blocks and runs.

Find layers

Finds layers across the site's pages (or one page) by part of their name or text, and/or by type, on each page's main breakpoint. Returns their ids for nodes_read and design_apply.

Query layers by attributes

Finds layers across the site's pages (or one page) whose DSL attributes meet every condition, e.g. all text smaller than 14px, every frame with an image fill, links with no link style: [{ attribute: "opacity", op: "lessThan", value: "1" }]. Operators: equals, contains, lessThan, greaterThan (numbers compare as numbers, 16px is 16), exists, notExists. Returns each layer with its page and the attributes the conditions name; change them with design_apply. Attributes are read as the Plugin API gives them, on each page's main breakpoint: units can differ from nodes_read, which reads through the Server API (a size in percent here, in px there).

Lock or unlock layers

Locks layers in the Framer editor so they cannot be selected or moved by accident (a grain or grid overlay, a background video), or unlocks them with locked: false. design_apply cannot do it: Framer ignores locked in the DSL. Works with or without the Server API key. Returns the layers it changed, those already as asked, and ids it found no layer for. Find locked layers with nodes_query [{ attribute: "locked", op: "equals", value: "true" }]. Undo takes it back.

Copy a layer's styles

Copies the look of one layer to others in one batch: pick the groups (color, text, border, radius, shadow, layout, size); only the values the source has are written. The way to make a set of cards, buttons or labels match one that is right. Undo takes it back.

Copy a layer as standalone layers

Copies a layer with everything inside it under another parent, on this page or another, and by default replaces the copy's component instances with their layers, so the copy follows no component: a starting point to change freely without touching the original or its components. Needs the project's Server API key.

Apply design changes

Changes a page and returns Framer's diagnostics (errors, warnings, lint, renamedIds). Prefer xml; dsl (raw +Node/SET/DEL/MOVE/DUPE commands) runs after it, for moves and duplicates. Without a Server API key it runs through the Plugin API: xml only, frames and plain text with layout, size, position, fill, radius, border, link and textStylePreset (framer_guide dsl lists them), and overrides on breakpoint copies by compound id; anything else refuses the whole batch before a change. XML: tags are node types, attributes are DSL attributes (framer_docs), every value in quotes. An element without id is created: nested ones under their parent element, a top-level one under parent="<id>", at the end unless index="<n>" is given; key="hero" returns its real id in keys, and @hero in any value (scope, component, parent, var(--variable-@label), and the dsl part) points at it within the batch. An element with id gets a SET of only the attributes it lists; $delete="true" deletes it. Nesting existing nodes only addresses them: nothing moves and omitted children stay. Inside an existing rich text, blocks and runs without id are the ones at that position (as nodes_read prints them); give a new one a key. Text: plain text inside a RichTextNode, or <TextBlock tag="h1">…</TextBlock> blocks with <TextRun bold="true">…</TextRun> runs; write & and < as &amp; and &lt;. Nested attributes are dotted: hoverEffect.scale="1". With a key, color text with a token on the RichTextNode itself, textColor="var(--token-<id>)", not only through its text style: only then does the token show in Framer's Color field. Framer applies every command it can and skips the failed ones: send only the failed commands again, fixed, never the whole batch (it would create its nodes twice). Pass pagePath for a node that is not on the home page (nodes_find and selection_get give it). Read framer_guide dsl before the first batch.

Set motion effects

Puts a motion preset on layers in one call: every value of the effect is written (Framer fills in its own otherwise: a hover scale of 1.1, a loop that spins, a scroll transform at half opacity), transitions are springs without bounce of the kind Framer keeps there, and delays grow along nodeIds. Prefer it to writing effect attributes with design_apply. Presets: fade-up (cards and blocks below the fold appear on scroll, one after another); hero-sequence (the first screen's heading, text and media appear on load, 0.1s apart); text-reveal (a heading appears word by word as it enters); hover-lift (a card or button rises 4px on hover); hover-fade (a link or image dims slightly on hover); press (a button gives way to 97% when pressed); float (a badge or illustration drifts up and down); pulse (a dot or badge breathes in scale); spin (a badge or mark turns slowly); scroll-grow (an image or section grows from 86% as it scrolls in); parallax (an image moves against the scroll inside a clipped frame (put it on the inner layer)); ticker (a stack of logos or words runs as a marquee, slower on hover); remove (removes the effects named in options.effects (all of them without it)). Hover and press go on a plain layer or a layer inside a component, never on a variant or breakpoint root (Framer refuses there). Effects never run on the canvas or in screenshots: say so and check them in Preview. Undo takes a preset back. Needs the project's Server API key.

Replace text

Replaces text inside text layers across the site's pages (or one page), including breakpoint copies that hold their own text (a copy that follows the primary breakpoint changes with it); the journal can undo it. Run it with dryRun first and show the user what changes. Each change says what happens to the formatting inside the layer: kept (with the Server API key Framer replaces in place: bold, links and lists stay), partial (the match crosses differently formatted runs and takes the formatting of the run it starts in), plain (without a key the layer is rewritten as plain text through design_apply).

Read site settings

Reads the site's settings and every page's in one place. The site: title, description, social image and favicons (light, dark, Apple touch icon), which every page inherits. Each page: its own title, description and social image (null inherits the site's), noIndex (hidden from search engines), noIndexSite (hidden from the site's own search), its layout template and whether it is a draft; plus the layout templates there are. Without a Server API key only the pages' paths and drafts are visible. Change them with site_settings_set.

Change site settings

Changes the site's and pages' settings in one call, so the fixes seo_audit suggests land together. The site: title, description, socialImage, favicon, faviconDark, appleTouchIcon (favicons exist only on the site). Pages by path, each with only what changes: title, description, socialImage, noIndex, noIndexSite, layoutTemplate, draft (noIndex exists only on pages). null clears a value, so a page inherits the site's again. noIndexSite follows noIndex unless given: Framer turns it on with noIndex and keeps it on after. Framer downloads each image URL itself; one it cannot download is left out and the call fails, but the rest is applied (the answer shows the settings as they are now). A page on a layout template takes its breakpoints' background, padding and gap from the template, so fill on them is refused. The journal can undo it; needs the Server API key.

Audit the layout

Checks a page (or one node and its children) for classes of layout defects that look broken on the published site, and returns each with the node and the fix: children of a stack lined up on different edges, cards of uneven height in grids and rows, text links in Framer's default link color, sections whose content width does not match the others, fixed widths and heights that break on narrower screens, what a tablet or phone breakpoint kept from desktop (grids with too many columns, columns side by side, wide side padding, display sizes without a phone size), gap ignored by space-between, nested corners that are not concentric, missing or skipped headings, uneven section spacing, and template habits (uppercase labels over every heading, numbered cards, a text-only page, Inter everywhere, headlines without balance). Run it after building a section and before calling a page done; fix every defect, then the likely ones. design_apply already returns the same findings for what it touched in audit.

Add breakpoints

Adds breakpoints to a page (Tablet 810 and Phone 390 are the usual pair; a width the page has is left alone) and returns all of its breakpoints with ids. Each is a copy of the primary breakpoint: build and delete layers in the primary only, then adapt a breakpoint by overriding its copies with design_apply xml, by compound id <breakpoint id><node id>, e.g. <FrameNode id="<tablet id><grid id>" gridColumnCount="2" />. Works without a Server API key. Add breakpoints before giving text styles their breakpoint sizes: the sizes follow the site's breakpoints.

Suggest breakpoints

Lists the breakpoints Framer suggests for a web page that it does not have yet (usually Tablet 810 and Phone 390), with their widths: check before breakpoints_add.

Screenshot a node

Renders a node (breakpoint, section, component variant) to PNG so you can verify the visual result. Needs the project's Server API key. Images longer than 2000 px on a side are refused: capture a region with clip, or use scale 0.5.

Compare a node with a reference image

Captures a node like node_screenshot and compares it with a reference PNG (a Figma export, by absolute path or https URL): the y of every horizontal line or edge and the x of every vertical one, paired between the two. The answer lists edges that match, edges off by a few px (where each is, and by how much the node's is off: positive is lower or further right), edges of the reference the node lacks, and edges only the node has. Export the reference at the same scale and size as the capture (clip and scale work as in node_screenshot). Needs the project's Server API key.

Screenshot a web page

Screenshots any public web page in Framer's browser: a reference site the user likes, a competitor's, or the published site (its URL is in publish_preview or publish_status). Use it to study a reference's layout, spacing, type and rhythm before designing, or to check the live site after a publish. The capture is the whole page at the window width given (390 for a phone, 810 for a tablet, default 1200), light or dark. A page longer than 2000 px comes scaled down to fit (a tall page gets narrow), and the text gives the full size and the full-size image's URL to open in a browser. Local, private and login-only pages cannot be captured: ask the user for a screenshot instead. Needs the project's Server API key. Returns the image and a line with its sizes and URL.

List redirects

Lists the site's redirects: from which path, to which path or URL, and for every locale or not.

No parameters.

Change redirects

Adds redirects (a from path that has one already changes it) and removes them by their from path. Redirects need a paid Framer plan. Undo does not restore redirects yet: the changed and removed ones are in the result.

Audit the whole site

Runs seo_audit, links_check, images_check, a11y_audit and (unless layout is false) layout_audit on every page in one call, and rolls them up: per check the defects, likely and taste findings and the three pages with the most, the rules hit most often, and every defect in full. The overview before handover; run a check on its own for its likely and taste findings. Needs the project's Server API key.

Check SEO

Checks what search engines and link previews get, page by page: a title of 30–60 characters and a description of 70–160 on every page (a page inherits the site's), no title used twice, exactly one h1, no page hidden from search but the 404, alt text on photos, and a social image and favicon for the site. Run it before handing a site over or listing a template. With a Server API key it reads every page's metadata; without one it checks the headings only and says so in note.

Check links

Lists every link on the site (frames and the link controls of component instances) and finds the ones that lead nowhere: a path the site has no page for, an anchor (/#pricing) that no layer on the target page carries as elementId, a mailto without an address, a tel without a number. CMS detail paths (/blog/:slug) and variable links are left out. Anchors are checked only with a Server API key, which reads elementId.

Check photos

Lists every photo on the site (image fills and image controls of component instances) and finds the same photo used on more than one layer, by its file, even at different sizes, so two cards never show the same people, and photo fills without alt text (with a Server API key, which reads altText). Use it after placing photos.

Check accessibility

Finds text that does not stand out from the solid color behind it (WCAG AA: 4.5:1, 3:1 for text of 24px and more), with tokens and text style colors resolved; links with no text inside for a screen reader; and photos without alt text. Text over photos and gradients is left out: no single color is behind it. Fix every low-contrast defect: change the text token, not the brand color.

Audit inline text formatting

Finds text formatted outside the design system, down to the runs inside a rich text: type set inline (font, size, weight, tracking, line height) instead of through a text style, and text colored with a raw value instead of a token. Each finding names the layer and the fix. Needs the project's Server API key.

Audit page weight

Measures each page's weight in the editor: layers on the main breakpoint, the deepest nesting and the photos; flags pages over 1,500 layers and layers nested more than 15 deep, with how to flatten them. For what visitors download (page size, broken images), use live_check on the published site.

Check a color pair

Gives the WCAG contrast of a text color on a background — CSS colors or the project's tokens by path ("Text/Primary") — with AA, AA-large and AAA verdicts. Check every text/background pair of a palette before proposing it (white on a mid orange usually fails).

Audit a Marketplace template

Audits a Marketplace template against Framer's template checklist, section by section, each finding with a severity and a fix: cms (posts, cases, team and testimonials in CMS collections rather than copied by hand; no empty collections, -copy slugs or default collection names), pages (a custom 404, every page on a layout template, legal pages when there is a form), responsive (Desktop, Tablet and Phone breakpoints, each adapted), layers (no "Frame 12"), text (no lorem ipsum or past copyright year, in pages and CMS), seo (titles, descriptions, favicon, social image, one h1, alt text), styles (text styles and color tokens, not written-out values), links, and copyright (no real companies' logos). manual lists what to check by hand. Run it before listing a template and fix every defect. Without a Server API key it skips layout templates, metadata, alt text, anchors and forms, and says so in note.

No parameters.

Check the published site

Reads the published site as visitors get it (the pages of its sitemap up to limit, each image and internal link once) and finds what the editor cannot show: values published as references, a literal var(--…) or {{…}} in text, alt text, titles or meta tags (a CMS field bound to alt text does this); images and internal links that answer 4xx/5xx; anchors without a target; a missing title, description, social image or canonical URL; other than one h1 at a screen width; heavy pages; http resources on an https page. Without url it checks the connected project's production site (staging when there is none) and says how many pages changed in the editor since that publish. Run it after a publish, before calling the work done. It only reads public URLs and never publishes.

Read components

Lists the project's components with their exact controls ($control__variant options, $control__<name> for each variable) before you place or change instances. Control names are the ones listed here, e.g. $control__showIcon; do not derive them from variable names. Code components are listed in codeComponents and Framer's own (Video, Google Maps, Embed, Slideshow, Carousel, Countdown, Cookie Banner, Search…) in framer: place any of them with +ComponentInstanceNode component="<id>", and pass its id in ids to read its controls first. Needs the project's Server API key (framer_status shows whether it is set).

Insert a component

Inserts a component by its module URL (framer.com/m/…): a free Marketplace component (marketplace_item gives its moduleUrl), or a URL the user copied from the Insert menu. design_apply cannot take a URL; Framer's own components (Video, YouTube, Google Maps, Embed, Slideshow, Carousel, Countdown…) it places by the ids components_read lists in framer. Then set its controls with design_apply ($control__…) or component_controls_set. Undo does not remove it.

Set component controls

Sets control values on a component instance, object controls included: a code component's arrows, dots or clipping, which design_apply refuses ("unsupported type object"). Names are the component's own ("Border"), as design_apply writes them ("border") or a variable id; an object merges with the instance's current value, so { arrows: { show: false } } keeps the other arrow settings. A border control takes "1px solid <color>" or, per side in CSS order, "0 0 1px 1px solid var(--token-<id>)", which design_apply cannot write (nodes_read shows such a border as one width). Simple controls (text, numbers, slots) still go through design_apply. Image URLs in image fields (image, images, photo, poster, logo… alone, in a list or in a list's entries) are uploaded first, since Framer keeps only uploaded images there: this is how a Marketplace carousel gets your photos ({ slides: [{ image: "<url>", caption: "…" }] }). The answer holds the controls as Framer kept them; notStored lists what it refused without an error (a transition object, a list of images): set those with design_apply $control__… or ask the user to set them in the editor. Undo does not restore controls set here.

Add a border variable to a component

Adds a border-type variable to a project component, which design_apply cannot create: the control its instances set their border with, per side too. The default is "1px solid <color>" or per side in CSS order "0 0 1px 0 solid <color>"; the color may be var(--token-<id>). Bind it with design_apply: SET <variant frame id> <bind from the answer>. The next call opens a fresh Server API session, so the DSL sees the new variable. Then set instances with component_controls_set or $control__<name>. Undo does not remove the variable. Needs the project's Server API key.

Make a component local

Copies an external component (from the Marketplace or a shared library) into the project and points the instance at the copy, so you can restyle it with the site's color tokens and text styles. Choose it over component_controls_set when the controls cannot reach the colors or type you need. A component designed in Framer becomes a project component: edit its layers with design_apply. A code component becomes a code file of the project (codeFile in the answer): edit it with code_file_read and code_file_write; Framer refuses to copy some code components. Without replaceAll, Framer first answers status needs_confirmation and changes nothing: ask the user whether only this instance or every instance should use the copy, then call again with replaceAll false or true. To edit one placement as plain layers, call component_detach afterwards. Undo does not take it back. Needs the project's Server API key (framer_status shows whether it is set).

Detach an instance

Replaces a component instance with its layers, like Detach in the editor, and returns the id of the new root layer (nodeId); the root keeps the instance's place and size in its parent. Choose it for a one-off edit of a single placement: the layers stop following the component, so later changes to the component skip them. To restyle every placement, edit the component instead. It works on an instance of a project component designed in Framer: make a Marketplace or shared-library instance local first with component_make_local. A code component has no layers to detach. Undo does not bring the instance back. Needs the project's Server API key (framer_status shows whether it is set).

Find a component's instances

Lists every instance of one component across the site's pages (or one page), each with its id, name and page: what a change to the component reaches, or which placements to tune with component_controls_set. Pass the component's id from components_read or its name ("Content/Card").

Look at Marketplace items

Reads Marketplace item pages — links the user gives you ("add this one, does it suit us?") — and returns what each is: the author's description, author, price (null = free), preview, categories, when it was last updated, and for a free component the moduleUrl for component_insert. With inspect true, each free component is inserted on a temporary page, its controls are read with their defaults, types and the tool that writes each, and the page is deleted again. Judge the fit from that before inserting it: does it take your own content (a slot takes ids of layers on the page; a list of images or of { image, … } entries takes image URLs through component_controls_set, which uploads them), does it size to its container or measure its first slide once (then one instance per breakpoint width), can its colors and type match the tokens, does it use a tween (set a spring with component_controls_set), was it updated recently. Open previewUrl with your browser tools to see it move.

Search icons

Finds icons by name across Framer's icon sets (Phosphor, Lucide, Material, Feather, Logos for brand logos…) and returns the set ids, exact icon names and each set's controls. Insert with +IconNode set="<setId>" $control__icon="<exact name>"; never guess names. For an icon no set has, draw it as SVG (image_upload svg or svg_add). Needs the project's Server API key (framer_status shows whether it is set).

List shaders

Lists Framer's shaders, animated backgrounds placed as a ShaderNode (liquid-gradient, mesh, wave-gradient, fluted-glass over a photo, particles…): which the site uses (onSite) and which it may add. Pass names to read their controls (colors up to 8, speed, scale, seed…) before placing one: <ShaderNode shader="<name>" $control__colors.0="var(--token-<id>)" …/> in an absolute Background frame pinned to all sides, with a shade above it for text. Tint it with the palette's base and ink tones and one second hue, never the action accent; a token follows dark mode. One shader per page. Needs the project's Server API key.

Upload an image

Uploads an image to the project's assets and returns its url, for a fill, a logo or a favicon. Pass exactly one of: url (https), path (absolute path to a local png, jpg, gif, webp, avif or svg), or svg (SVG markup: own icons, logos and illustrations drawn as vectors).

Upload a file

Puts a file that is not an image into the project's assets — a video for a code component's File control, a PDF, a font — and returns its url. Pass exactly one of: url (https, Framer downloads it) or path (absolute path to a local mp4, m4v, mov, webm, pdf, woff, woff2, ttf or otf). Images go through image_upload.

Add an SVG layer

Adds SVG markup as an editable vector layer — own icons, logos, illustrations — and returns the new layer's id (nodeIds). Without parentId Framer puts it into the layer selected in the editor; with it, it moves there. Its size cannot be set through the DSL: to reuse a logo or icon across the site, ask the user to add the layer to a project vector set (Vectors panel; the API cannot), then place it as an IconNode of that set. Works through the Sitewright plugin only.

List CMS collections

Lists the project's CMS collections with their fields (id, type, enum cases, the collection a reference points at, a List's nested fields) and item counts. A field binds on the canvas by its id: var(--variable-<id>). Collections a sync plugin manages are read-only here.

Create a CMS collection

Creates a CMS collection with its fields. A string Title comes first, unless you pass a string field named Title or Name, which then goes first: Framer names items and builds their slugs from the first string field. Types: string, formattedText, number, boolean, date, link, image, file, color, enum (with cases), collectionReference and multiCollectionReference (with collection), array (a List: entries with nested fields, e.g. [{ "name": "Image", "type": "image" }] for a gallery). Framer gives an item written without them true for a boolean field and #09F for a color field: write those for every item. Undo does not restore CMS collections, fields or the order of items yet: the journal cannot take this back.

Delete a CMS collection

Deletes a CMS collection with all its items and returns its fields and items. Only when the user asked for it, or for a collection you created yourself in this task. Needs a Server API key. Undo does not restore CMS collections, fields or the order of items yet: the journal cannot take this back.

Change CMS fields

Adds, renames, removes and orders a collection's fields; update also adds, renames, removes and orders an enum's cases. A rename keeps every item's value and the layers bound to the field. Removing a field drops its value in every item: do it only when the user asked. Before a removal it searches every page for layers bound to the field (with a Server API key) and refuses while there are any, naming the pages: rebind them first, or pass force: true, and those layers show Framer's placeholder "Content". A new boolean field is true and a new color field #09F in every item until written. Undo does not restore CMS collections, fields or the order of items yet: the journal cannot take this back.

List CMS items

Lists a collection's items, a page at a time, with their id, slug and values by field name, Lists in full. A collection list on the canvas filters by a reference with the referenced item's id; a slug there matches nothing. Values: text and formattedText as strings (markdown or HTML), numbers, true/false, dates as ISO strings, link, file and color as strings, an image as its URL or { "url", "alt" } (a bare URL clears the alt), an enum by its case name, a reference by the referenced item's slug (a list of slugs for multi-references), a List (array) as a list of entries, each an object by its nested fields' names (a gallery also as a list of image URLs); a List value replaces the whole list, and a nested field an entry leaves out takes Framer's default (0, #09F); null clears a value.

Write CMS items

Creates or updates items by slug, with values by field name, and answers each item's id and the slug Framer kept (lower case with hyphens); the journal can undo it. Values: text and formattedText as strings (markdown or HTML), numbers, true/false, dates as ISO strings, link, file and color as strings, an image as its URL or { "url", "alt" } (a bare URL clears the alt), an enum by its case name, a reference by the referenced item's slug (a list of slugs for multi-references), a List (array) as a list of entries, each an object by its nested fields' names (a gallery also as a list of image URLs); a List value replaces the whole list, and a nested field an entry leaves out takes Framer's default (0, #09F); null clears a value.

Delete CMS items

Deletes items by slug; the journal can undo it, and their values come back in the result too. Delete only items you created or the user asked to remove.

Order CMS items

Moves items to the top of a collection in the given order; the rest keep their order after them.

Make a blog collection ready for search

Creates a CMS collection with the fields a ranking blog needs (Title, Excerpt, Content, Image and its alt text, Meta Title, Meta Description, Target Keyword, Category, Tags, Published, Author, and Related posts pointing at the collection itself), or adds the missing ones to an existing collection. Then bind them on the list and post pages, and run cms_interlink once posts are in. Needs the project's Server API key.

Link related posts

Fills each item's Related field with its most related items: the same Category scores 3, each shared tag 2, each shared word of the Target Keyword 1; items with nothing in common are left out. dryRun shows the links first. Internal links between posts help search and keep readers on the site. Needs the project's Server API key.

Add a blog

Sets up a blog: a search-ready collection (cms_seo_collection), the list page (/blog by default) and the post page for each item (/blog/:Blog). The pages are left empty for you to build in the site's own styles; the answer says how. Needs the project's Server API key.

List locales

Lists the site's locales (code, name, URL slug, fallback) and which one is the default. Add one with locale_add.

No parameters.

Read translations

Lists translatable texts (pages, CMS items, components, site settings) with their default-locale text and the translation for one locale. missing: true lists only what still needs translating. Page through with offset.

Write translations

Writes translations for one locale by source id from localization_get (null clears one, so the fallback shows), and can mark groups ready or excluded for the locale. Keep the markup of formattedText sources (the HTML tags) and translate only the text. Undo does not restore translations yet: the previous values are in the result.

Add a locale

Adds a locale to the site: a language ("nl" or "Dutch"), optionally for a region ("nl-BE", or region "BE"). A wrong language returns the languages Framer knows, a wrong region the language's regions. It is a draft by default: a draft locale stays off the published site until the user turns it on, so translate first with localization_get and localization_set. fallback names the site locale shown where a translation is missing; slug and name default to ones from the code. Needs the project's Server API key (Framer's createLocale is alpha and Server API only). Returns the locale's id, code, name, URL slug, draft and fallback. Undo does not remove a locale: the user removes it in the editor.

Read custom code

Shows the site's custom HTML in each location (head start and end, body start and end).

No parameters.

Set custom code

Sets the site's custom HTML for one location on every page (analytics, verification tags, fonts); html null removes it. Use when the user asks for code, or when the canvas (design_apply), Framer's own components and Marketplace components cannot give what the task needs: a value or state the canvas has no node for (computed, from an API, random, shared by several components), input read every frame (cursor, drag, frames stepped by scroll), or a fix a component's controls cannot make. Name which one to the user before writing code. Works only while the user has Custom code switched on in the plugin.

List code files

Lists the project's code files with their exports (code components and overrides).

No parameters.

Read a code file

Returns a code file's source.

Read several code files

Returns the source of up to 25 code files in one call; names not found are listed in missing.

Edit part of a code file

Changes a code file by find-and-replace edits, in order, so only the changed snippets travel: each find must be in the file exactly once (or pass all), or nothing changes. Returns the TypeScript problems of the new version. Use when the user asks for code, or when the canvas (design_apply), Framer's own components and Marketplace components cannot give what the task needs: a value or state the canvas has no node for (computed, from an API, random, shared by several components), input read every frame (cursor, drag, frames stepped by scroll), or a fix a component's controls cannot make. Name which one to the user before writing code. Works only while the user has Code components switched on in the plugin.

Rename a code file

Renames a code file. Its components and overrides keep working on the canvas. Works only while the user has Code components switched on in the plugin.

Check a code file

Returns a code file's problems as Framer compiles it: TypeScript errors with line and column (and lint warnings while Framer still reports them). Run it after writing code, before telling the user it works.

Add a light and dark switch

Writes a code override that switches the site between its color tokens' light and dark values when clicked, starting from the visitor's last choice or system theme and remembering it, and attaches it to the layer you give (a button or an icon). Framer has no theme switch of its own. Tokens without a dark value stay as they are. Works only while the user has Code components switched on in the plugin.

Write a code file

Creates or replaces a code file: a React code component or a code override for Framer. The replaced version is not returned (only its size): read it with code_file_read first when you may need it back. Use when the user asks for code, or when the canvas (design_apply), Framer's own components and Marketplace components cannot give what the task needs: a value or state the canvas has no node for (computed, from an API, random, shared by several components), input read every frame (cursor, drag, frames stepped by scroll), or a fix a component's controls cannot make. Name which one to the user before writing code. Works only while the user has Code components switched on in the plugin.

Delete a code file

Deletes a code file and returns its source. Undo does not bring it back: delete only files you created yourself (a temporary probe) or the user asked to remove. Works only while the user has Code components switched on in the plugin.

Activity journal

Lists what the AI did in this Framer project, newest first: every tool call, undo, redo, restore, checkpoint and skill used, with a human title, the layer it ran through (plugin-api, server-api, framer-agent) and whether it can be undone. show picks changes with the skills (default), reads, skills, or all.

Activity entry

One journal entry in full, including its undo steps (the state before and after each change).

Mark a checkpoint

Marks a point in the activity journal (call it when you start a new user task). activity_restore can later roll the project back to it.

Undo an AI change

Undoes the newest AI change still in effect, or the entry given by entryId; andLater also undoes every change made after that entry, bringing the project back to how it was before it. Items someone changed after the AI are reported as conflicts and kept unless onConflict is force; an undo that kept every item changes nothing, so the entry can be undone again with force. Color tokens, text styles and design_apply edits undo exactly; deleted nodes come back with new ids (results[].newId). Undoing DSL edits needs the Server API.

Redo an undone change

Reapplies the newest undo or restore still in effect, or the one given by entryId.

Restore to a checkpoint

Brings the project back to how it was at a checkpoint: undoes the changes made after it and redoes undos of older changes made since. Runs as a dry run unless dryRun is false, so check the preview first.

Open the activity journal

Returns the link to the local app in the browser: the activity journal with everything the AI did in the project, undo, redo and checkpoints, the settings (custom code, code components, plugin first), and the window that connects the Framer plugin. Give the link to the user.

No parameters.

Framer guide

How to build in Framer, from live builds: what Framer does without saying so, how layout and motion work, and how to check the result. It gives no design advice: the design is the user's. Read "dsl" before the first design_apply of a session, then the topic for the task. Topics: dsl (what Framer does without saying so: batches, breakpoints, text styles, components and clicks, menus, forms, overlays, CMS lists, which springs it keeps, metadata, assets, Marketplace components); layout (how stacks, sizes, equal heights, grids, containers, breakpoints, sticky and overflow, images and links behave in Framer); motion (listing the states of anything that moves or responds, which transitions Framer keeps, how to build effects, pinned scroll sections, scroll headers, horizontal galleries, page transitions, tabs, links on components); verify (the audit, looking at the result, going through every state in a real browser, the checks that it works, and what to tell the user at handover); template (a site for the Framer Marketplace: Framer's template checklist, what buyers edit, and the listing); no-key (what works through the plugin without a Server API key, and how to get the rest anyway).

Framer DSL reference

Framer's official agent reference for its DSL (commands, attributes, layout, CMS, variables, forms, effects), read live from Framer so it matches its current version. Start with section "essentials": its guardrails, core principles, command syntax with computed values and critical reminders in one read (continue with nextOffset). No arguments lists sections; pass section to read one, or query to search. guide reads one of Framer's implementation guides (FAQ, Navigations, Buttons, Effects, Overlays, Forms, Grids…): read the one for what you build before building it, they hold the recipes the reference lacks (e.g. how an accordion animates). Needs the project's Server API key (framer_status shows whether it is set).

Query Framer's agent

Runs Framer's own readProject queries (font-search, component-definition, icon-set-definition, shader-definition, implementation guides…) and returns their answer as is: for what the other tools do not read. framer_docs section "essentials" lists the query types. Needs the project's Server API key.