Using EBRAINS Components in Plain HTML
This guide shows how to use EBRAINS web components directly in HTML — no React, Vue, or Angular. Just the Stencil loader, native custom elements, and the Tailwind factory for styling.
This is the simplest integration path: load the components, write HTML with <eds-*> tags, and style with utility classes.
Step 1: Create the App
Generate a vanilla web app with Nx:
Step 2: Set Up Tailwind
Create a tailwind.config.js using the shared factory:
Create a postcss.config.js:
Update src/styles.css with Tailwind directives:
Vite auto-discovers postcss.config.js — no extra Vite configuration needed for PostCSS.
Step 3: Configure Vite for the Component Loader
The Stencil component loader needs to be resolved via a Vite alias. In vite.config.ts, add the alias with an absolute path:
Important: The alias must use path.resolve(__dirname, ...) for an absolute path. Relative paths won’t resolve correctly because Vite’s root changes the working directory.
Step 4: Load the Components
In src/main.ts, import and call the Stencil loader:
This registers all <eds-*> custom elements globally. No framework wrappers needed.
Step 5: Use Components in HTML
Write components directly in index.html using their tag names and HTML attributes:
Key Differences from React/Vue
| Aspect | React/Vue Wrapper | Plain HTML |
|---|---|---|
| Component names | <EdsButton> (PascalCase) | <eds-button> (kebab-case) |
| Props | camelCase (pressableLabel) | kebab-case (pressable-label) |
| Booleans | {true} / {false} | "true" / "false" (strings) |
| Objects/Arrays | Pass as JS objects | Pass as JSON strings |
| Events | onEdsalert={handler} | addEventListener('edsalert', handler) |
| Slots | <div slot="panel-0"> | Same — slots are native web component API |
| Self-closing | <EdsButton /> | <eds-button></eds-button> (must have closing tag) |
Listening to Events
Use standard addEventListener in plain JavaScript:
Setting Properties Dynamically
For complex props (objects, arrays), set them as JavaScript properties rather than HTML attributes:
Build Requirements
Before serving the app, the component library must be built:
This produces the compiled components in dist/packages/components/ which the loader alias points to.
Example
See apps/sandbox/test-web/ for a complete working example with every component rendered in plain HTML.