Connect Framer

Connect a Framer CMS collection to receive finished articles. Framer needs a one-time article-template setup so tables, section links and other HTML details survive intact.

Prepare your CMS templateCopy Anchor Link

1. In the blog collection, add a plain text field named Article HTML. Do not use a formatted-text field for this field: Framer's HTML import can remove heading anchors and other details.
2. Download the outwrite.ai article component. In Framer, create a code file named OutwriteArticle.tsx and paste its contents.
3. Add that component to your blog CMS page where the article body should appear. Bind its HTML property to Article HTML using Set Variable. Replace the old body block and hide any separate article-page cover block, since the component includes the cover. Keep the cover on blog listing cards.
4. Keep your title, excerpt and listing-cover fields as usual. The article component includes the selected cover above the article body.
5. Publish this template setup in Framer, then connect outwrite.ai.

The component renders article HTML on the page, including in the server response. It inherits your site's font and colour, with readable spacing for headings, tables and lists. Use it only with trusted article HTML.

Connect the collectionCopy Anchor Link

1. Create a project-scoped API key in Framer and copy your project ID from its editor URL.
2. In outwrite.ai, open Plan → Schedule and publishing → Connect or manage a website → Framer.
3. Enter the project ID and key, then choose Find my collections.
4. Choose your blog collection. Match the title, Article HTML, excerpt and cover fields.
5. Enter the published site URL and blog path, such as blog for /blog/article-slug.
6. Connect and send your first article as a draft. Check it in Framer before enabling live delivery.

The key is encrypted and used only on the server. Connecting does not change your template or publish the site.

Drafts and live publishingCopy Anchor Link

Draft delivery adds a draft CMS item. You publish it from Framer when ready.

Live delivery requires the separate Allow Framer project publishing option. Framer deploys the entire project, rather than one isolated CMS article. outwrite.ai checks for unpublished page changes before a live delivery and asks you to resolve them first. Avoid making unrelated site edits while an automatic publication is running.

If your Framer project uses a separate staging domain, configure and verify that destination deliberately. outwrite.ai only marks a delivery published after it can verify the article on the configured public URL. A deployment request alone is not a successful delivery.

TroubleshootingCopy Anchor Link

Disconnecting stops future deliveries. Existing Framer CMS items remain intact.