HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Getting started
Without a bundlerHelix ships standard ES modules and plain CSS files. On a page with no build
step, you can use the Helix styles. The elements need a bundler for now.Use the styles alone<linkhref="/vendor/helix-styles/helix.css"rel="stylesheet"/>helix.css imports four files in the order they must load:primitives.csstokens.cssbase.csselements.cssIts @imports are relative, so a browser resolves them against the stylesheet's
own URL. Copy the whole dist folder and link helix.css. We checked this in
Chromium: one <link> makes five requests, and every layer resolves.Until August 24, 2026, this page listed tokens.css and base.css without
primitives.css. tokens.css refers to the primitives throughout and imports
nothing. If you followed the old instructions, every semantic token is declared
and every color resolves to rgba(0, 0, 0, 0). If your page looks unstyled in
that way, link helix.css.elements.css matters most on a page with no bundler. Without a bundler, the
module graph loads over the network, so the markup is on the page longer before
the element definitions arrive. elements.css is the fourth layer that
helix.css imports. It used to be a second link, and moving it into the same
package made its import relative. Only a bundler resolves a bare specifier in an
@import, so a bare specifier would not work on a page with no bundler.The elements need a bundler@fusion.dev/helix imports its dependencies by bare specifiers, such as
@fusion.dev/helix-core and lit. A browser resolves a bare specifier only
through an import map. The elements import a separate subpath of
@fusion.dev/helix-headless for each family, and the package's exports maps
each one to an index.js in a folder of its own, so an import map would need an
entry for each one. A subpath of lit is the path of its file, so one "lit/" entry
covers all of them.To use the elements, load them through a bundler, as
Installation shows. A CDN that rewrites bare specifiers into
URLs can serve the elements to a page with no build step, once the packages are
public on npm.