CLD-1736: Replace DevLink _Builtin imports with native HTML#2
Merged
Conversation
The homepage in src/pages/index.astro imported Section, Container, Block, and Link from ../../devlink/_Builtin/Basic. Those files are user-generated by the DevLink export (which runs automatically after init), so a fresh clone failed to build. This swap to native section/div/a elements lets the project build out of the box, with styles kept in the existing <style> block. Layout.astro still imports DevLinkProvider and global.css from the devlink directory — those resolve correctly once the auto-run export populates ./devlink. Mirrors the equivalent change to the Next.js scaffold in webflow/webflow-cli#589 and Webflow-Examples/hello-world-nextjs-devlink#2. Also updated the docs link to /data-clients/docs/getting-started.
agustinchiarotto
approved these changes
May 18, 2026
webflow.json's active config is `devlink-export.rootDir: "./webflow"`, so the export populates ./webflow/ (project root), not ./devlink/. The legacy `devlink` block is unused. Update Layout.astro to import from the correct path: - DevLinkProvider: ../../webflow/DevLinkProvider - global.css: ../../webflow/css/global.css Also update the example-import hint in index.astro to match.
Drops the <style> block and inlines the equivalent styles directly on the section, heading, paragraph, and link elements. Matches the inline- style convention used for the same fix in hello-world-nextjs-devlink#2.
The exported global.css wraps every rule in @scope (.wf-devlink-<hash>), so without an ancestor carrying that class, normalize and Webflow defaults never match. DevLinkProvider is a React Context provider and doesn't render any DOM wrapper, so the scope class was effectively unreachable for native HTML in the page. Imports DEVLINK_SCOPE_CLASS from the generated webflow/devlinkScope.ts and applies it to <body>, so Webflow's normalize + defaults now cover the whole page (including native HTML elements). The constant updates automatically on each re-export, so the hash stays in sync.
CSS @scope matches descendants of the scope-root, not the scope-root itself. With the class on <body>, rules like `body { background-color }` inside @scope (.wf-devlink-<hash>) never matched body (body IS the scope-root) — so body-level Webflow defaults (background, font-family, font-size, color) never applied. Moving the class to <html> makes body a descendant of the scope-root, so all body and below selectors inside the scope now match. Verified locally: `body` now picks up Arial 14px / #333 / #fff background from defaults.css.
Mirrors the dark-mode handling in the Next.js scaffold's globals.css. Without this, body falls back to Webflow defaults (background #fff, color #333) even when the OS is in dark mode, so the page stays light while the Next.js sibling switches to a dark background. Adds --background / --foreground custom properties on :root with a prefers-color-scheme: dark override, and applies them to body.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
src/pages/index.astroimportedSection,Container,Block, andLinkfrom../../devlink/_Builtin/Basic. Those files are user-generated by the DevLink export (which now runs automatically after init), so a fresh clone fails to build until the export has run. This PR replaces the component usage with native HTML so the homepage renders independently of the DevLink output.Mirrors the equivalent change in:
Changes
src/pages/index.astro— replaced<Section>/<Container>/<Block>/<Link>with native<section>/<div>/<a>. Styles kept in the existing<style>block (more idiomatic for Astro than inline style objects). Droppedclient:load(no longer needed). Updated the docs URL to/data-clients/docs/getting-started. Added a comment hint for users on how to import DevLink components from../../devlink/*once needed.Intentionally unchanged
src/layouts/Layout.astro— still importsDevLinkProviderand../../devlink/global.css. Those resolve correctly because the DevLink export runs automatically after init, populating./devlink. The provider keeps wrapping<slot />so DevLink components dropped into pages work without extra wiring.Linked ticket
CLD-1736
Test plan
npm install && npm run buildsucceeds on a fresh clone (after auto DevLink export)DevLinkProviderinLayout.astro🤖 Generated with Claude Code