Slater Code

Write scripts with AI. Ship them when they’re ready.

The AI JavaScript editor for Webflow. Write scripts with help that knows your page, test them on staging, and publish them without republishing your site.

Get started Read the quick start

A sample script in the Slater editor

Harbor Coffee · Scripts

Global4

Global external.js

NavBar.js

Page scripts14

Product tabs.js

Audio player.js

Brew timer.js

Gift card form.js

Subscription slider.js

Product tabs.jsLoads on /shop/*Staging and production in sync

// Settingsconst TAB_LINK = '.product-tab';const PANEL = '.product-panel';const FADE_MS = 200; // Show the panel for the clicked tab$(TAB_LINK).on('click', function () {  const id = $(this).attr('href');  $(PANEL).hide();  $(id).fadeIn(FADE_MS);}); // Open the first tab on load$(TAB_LINK).first().click();

Slater AI

I can see Product tabs.js and the Webflow classes on this page. Ask me to change it, explain it, or write something new.

Rewrite this without jQueryWhy might the first tab not open?Add keyboard support to the tabs

Ask about this file

Works with: Webflow sites To confirm
Writes: JavaScript, with an AI assistant
Runs: On every page, or pages that match a path
Ships: Staging first, then production

1
Write with AIAn assistant that knows your file and your page’s Webflow classes.
2
Staging firstTest on staging without publishing, then ship to production when it’s ready.
3
Organized by pageGlobal scripts and page scripts, each loading only where it should.

Three jobs it does well. Without a build step.

Code keeps custom JavaScript out of scattered embeds and in one place, with help writing it.

Interactions

Add what Webflow can’t do on its own

Tabs, timers, form logic and sliders, written with an assistant that already knows your page’s Webflow classes.

“Add keyboard support to the tabs”Rewrites Product tabs.js with arrow-key support.

Teams

Keep every script in one place

Global scripts and page scripts, each loading only where it should, instead of code spread across Webflow embeds.

“Where does Product tabs.js load?”Only on /shop/*.

Releases

Ship without holding your breath

Check a change on staging, publish it to production, and roll back if you need to. Slater keeps every version.

“That broke the subscription slider”Roll back to the last version.

How it works. Three steps.

Code runs on the same Slater script as every other tool, so if you’ve set one up, you’ve set this up.

Add the Slater script

Paste it once into Site settings. It covers every Slater tool on the site.

<!-- Site settings › Custom code › Head -->
<script src="https://slater.app/s.js"
  data-site="harbor-coffee" defer></script>

Create a script
Choose New script, then describe what you want to the AI editor or write it yourself.
Choose where it runs, then ship
Run it on every page, or only on pages that match a path. Save to staging, check it, then publish to production.

Where it connects

Webflow pages and their classes
Your webflow.io staging domain, for testing before production

Script URL and attribute names are placeholders until the docs are written.

The details. Before you start.

What Code supports today. Anything still being confirmed is marked.

Platforms: Webflow, on any plan that allows custom code To confirm
Language: JavaScript
Where scripts run: Every page, or pages that match a path like /shop/*
Releases: Staging first, then production. Every version is kept, so you can roll back
AI editor: Knows the file you’re editing and your page’s Webflow classes
Publishing: Script changes go live from Slater, without republishing your Webflow site
Limits: [AI requests per month by plan] To confirm
Access: [Included with a Slater account, or plan required] To confirm

Try Code on your next build. Bring the rest of the kit.