Get Started
Create your first Odyn project, deploy to staging, and embed the output on your site.
This guide walks through the shortest path to a working deployment: create a project, write code, deploy to staging, and verify the output.
Create a Project
Sign in and create
Sign in to the Odyn Dashboard, click New Project, enter a project name and select Webflow as the platform.
The editor opens with an empty file tree.
Add a file
Right-click the file tree, select New File, name it main.js, and add your JavaScript:
document.addEventListener("DOMContentLoaded", () => {
console.log("Odyn is running.");
});Press Cmd+S to save. For CSS, create a styles.css file — both JavaScript and CSS are included in the deployment.
Choose a deployment mode
Odyn supports three build modes:
| Mode | Output | When to Use |
|---|---|---|
| Bundled | Single IIFE bundle | Default, simplest setup |
| Per-file | ES module per entry point | Tree-shaking, dynamic imports |
| Folder bundle | Bundle per folder | Feature isolation |
Bundled mode is the default. See Deployment Modes for details.
Deploy to staging
Open the Deploy panel in the left activity bar, click Deploy to Staging, and wait for the build to complete.
Staging deployments are not cached and update instantly on refresh.
Verify the output
Copy the staging embed code from the deployment panel and paste it into your Webflow project's Custom Code settings (Footer Code for scripts, Head Code for stylesheets). Publish your Webflow site and check:
- The Network tab shows a 200 response for the CDN URL.
- The Console tab shows
Odyn is running.(or your expected output). - No loading errors appear.
Toggle Auto-Deploy in the deployment panel to trigger a staging deployment on every Cmd+S save. CSS changes hot-swap without a page reload.
Next Steps
- Deploy to production when staging is verified.
- Add external dependencies like GSAP or Swiper.
- Learn the editor — split panes, command palette, keyboard shortcuts.
- Configure domain protection to restrict where your scripts load.