Slater

Webflow's built-in custom code editor works for small additions, but it becomes a bottleneck on complex projects: there's a character limit per embed, no version history, and every code change requires a full site publish to test.

Slater is a dedicated JavaScript environment built specifically for Webflow that removes those constraints. It connects through a single script, so once you've set it up, you write, test, and deploy code entirely through Slater's interface.

This page covers the two main ways to connect Slater to Webflow and how to pair it with the Webflow API for CMS-driven workflows.

How to integrate Slater with Webflow

What is Slater? Slater is an AI-powered JavaScript development environment built for Webflow. It connects to your Webflow site through a single embed script and provides a dedicated editor with AI-assisted code generation, staging and production environments, a version history with rollback, and a reusable code library. Slater is built by the team at Edgar Allan.

The two integration methods below use the same underlying mechanism: a script added once to your Webflow site's footer code that tells Webflow to load JavaScript from Slater's CDN instead of from native embeds.

The difference between the two methods is how you set up that script — through the Webflow Apps Marketplace or by pasting it manually into Site settings.

Most teams use the app, then reach for the manual path only when working in environments where app installation isn't available. For teams who also need to run programmatic CMS operations, the Webflow API works alongside Slater as a separate layer.

Install the Slater app

Install Slater from the Webflow Apps Marketplace to connect both tools and access Slater's editor from inside Webflow. The app generates the script snippet you need and guides you through adding it to your site.

To set up the integration:

1. Create a Slater account at hi.slater.app or through the Webflow Apps Marketplace listing  
2. In Webflow, go to Site settings > Custom code > Footer code  
3. Paste the Slater script snippet before the closing </body> tag  
4. Save your changes and publish your site to activate the script

Once the script is live, all subsequent code changes deploy directly through Slater — no Webflow republish needed. To verify the connection, add console.log("👋") to a new Slater file, publish to staging, and confirm the output appears in your browser console. Then promote to production when ready.

Slater's editor gives you several capabilities that Webflow's native custom code does not:

• AI-assisted code generation: Write a plain English prompt, get working JavaScript, and see Slater's explanation of how it works underneath  
• Staging and production environments: Code deploys to your .webflow.io subdomain first, so you can test without affecting your live site  
• Version history: Use the History tab to revert to any previous version of your code  
• Code library: Save reusable solutions and drag them into new Slater projects  
• Team collaboration: Invite teammates and manage their access permissions within Slater

These features are independent. You can use AI generation on one file, manage a code library across another, and run staging tests on a third, all through the same dashboard.

Add Slater via site-level custom code

If you prefer to connect manually rather than through the marketplace listing, paste the Slater script directly into Webflow's custom code in the head and body tags settings.

Navigate to Site settings > Custom code > Footer code, paste the snippet before the closing </body> tag, then publish your site to activate the script. This achieves the same result as the app-based method — the script is identical.

This path is useful when you're working in a Webflow workspace where app installation requires a permission level you don't have, or when you want to manage all site-level code from one place without an additional app connection.

Once the script is active, you work exclusively through Slater's editor. The connection gives you the same capabilities as the app method: no character limits on your JavaScript, hot reloading on your staging subdomain, and multi-file organization across a single project.

This approach works on any Webflow plan that supports custom code in head and body tags.

Build with the Webflow API and Slater-deployed code

For workflows that require programmatic CMS operations — creating collection items from external data, syncing content, or triggering rebuilds — you can write JavaScript in Slater that calls the Webflow API. Slater handles the development environment. The Webflow API handles the data operations.

Because Slater-deployed code runs client-side in the browser, API calls that require authentication should route through a serverless function (AWS Lambda, Vercel, or Cloudflare Workers) rather than making credentialed requests directly from browser JavaScript.

Your Slater-deployed code calls the serverless function, which holds the credentials and calls Webflow's API endpoints. This keeps your tokens out of the browser and your code out of Webflow's native custom code editor.

The Webflow API endpoints most commonly used alongside Slater are:

• POST /v2/collections/{collection_id}/items: Create Webflow CMS items from external data sources like Airtable, Google Sheets, or a custom database  
• PATCH /v2/collections/{collection_id}/items/{item_id}: Update existing collection items for real-time content synchronization  
• POST /v2/sites/{site_id}/publish: Trigger a site publish after programmatic content updates

Slater does not have a public API or webhook system. For event-driven workflows, for example, running code when a CMS item is created or changed, use Webflow's native webhook system with events like collection_item_created and collection_item_changed.

You can write the code that handles those webhook payloads in Slater's editor and deploy it to your site as part of your client-side logic. Authentication for the Webflow API uses OAuth 2.0 Bearer tokens as described in Webflow's authentication docs.

What you can build with the Slater Webflow integration

Slater's editor covers a range of use cases, from designers who want to add a single custom animation without wrestling with character limits, to developers building CMS pipelines that generate pages from external data sources. The right build depends on how much of Slater's feature set you need.

Here are a few things you can build with this integration:

• Custom animation and interaction layers: Build motion-heavy sites with GSAP animations, scroll-triggered effects, and complex interaction sequences written in Slater's editor — staged and tested on your .webflow.io subdomain before going live, without the character constraints of Webflow's native code embeds.  
• Live data displays from external APIs: Create pages that fetch real-time data from third-party APIs — like the weather data demo in Slater's showcase — and render it with conditional logic on a Webflow page, using Slater's AI assistance to write and iterate on the fetch calls.  
• Custom UI components with state management: Build interactive elements like date range pickers, multi-step forms, or custom filtering logic that require JavaScript state management unavailable through Webflow's native interactions — organized across multiple Slater files within a single project.  
• Membership-gated experiences: Develop authenticated interfaces that integrate tools like Memberstack, where Slater's AI assists with the conditional display logic and user-specific functionality, as documented in Slater's Corey Moen case study.

For teams building programmatic SEO pages (hundreds of location pages, product listings, or resource directories generated from an external database), this pattern works well: write the CMS API calls in Slater's editor, route authenticated requests through a serverless function, and use the Webflow API to create and publish collection items programmatically.

Start by installing the Slater app from the marketplace.