Skip to content

DevLink V2 update #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
paulvmoreau-webflow merged 7 commits into from
May 19, 2026
+37 −1
Merged

DevLink V2 update #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
bde380c
Merge pull request #3 from Webflow-Examples/v1
agustinchiarotto May 18, 2026
a9578a5
Implement DevLinkProvider and IX3 interactions; add telemetry support…
paulvmoreau-webflow May 18, 2026
08b03fd
Update layout to include DevLinkFontTags component and clean up webfl…
paulvmoreau-webflow May 18, 2026
169aaca
Add Webflow CLI setup instructions to README
paulvmoreau-webflow May 19, 2026
673064d
Refactor Webflow structure and remove unused components
paulvmoreau-webflow May 19, 2026
7e1b6f7
Merge branch 'v1' into devlink-v2-update
paulvmoreau-webflow May 19, 2026
a1f7b9b
Update `webflow.json` to change `rootDir` for DevLink exports from `.…
paulvmoreau-webflow May 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,38 @@ Example [Next.js](https://nextjs.org) app for [Webflow Cloud](https://webflow.co
└── wrangler.json
```

## Set up Webflow CLI

Install Webflow CLI (global install is optional; you can also run the CLI without `npx` in the export step below).

```bash
npm install -g @webflow/webflow-cli
```

Log in to Webflow and select your desired workspace from the opened browser window. You can append `--force` to reset any existing authentication.

```bash
npx webflow auth login
```

Then, install the needed dependencies.

```bash
npm install
```

Sync all the Webflow components into your local filesystem. Answer the prompts to generate and configure your `webflow.json`.

```bash
npx webflow devlink export
```

Select your desired Webflow site from the sites listed.

You can also view <a href="https://developers.webflow.com/devlink/reference/overview" target="_blank" rel="noopener noreferrer">our DevLink documentation</a> to learn more about all the options, features, and supported elements.

The `webflow.json` `devlink-export` block tells the Webflow CLI where to write generated React components from your linked Webflow site. After running `webflow cloud init` (or `webflow auth login` + `webflow devlink export`) the CLI populates `./src/webflow/` with components you can import directly into your Vite app.

## Commands

| Command | Action |
Expand Down
4 changes: 4 additions & 0 deletions src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import type { Metadata } from "next";
import "./globals.css";
import { DevLinkProvider } from "@/webflow/DevLinkProvider";
import { DevLinkFontTags } from "@/webflow/webflow_modules/DevLinkFontTags";
Comment thread
paulvmoreau-webflow marked this conversation as resolved.

export const metadata: Metadata = {
title: "Create Next App",
Expand All @@ -14,6 +15,9 @@ export default function RootLayout({
}>) {
return (
<html lang="en">
<head>
<DevLinkFontTags />
</head>
<body className="antialiased">
<DevLinkProvider>
{/* Add here any Navbar or Header you want to be present on all pages */}
Expand Down
2 changes: 1 addition & 1 deletion webflow.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,4 @@
"cssScopes": true,
"relativeHrefRoot": "/"
}
}
}