Espalier guides

Start with getting started to install Espalier and set up <esp-root>. Then use the guides below for the task at hand.

Build an interface

• Build a site: turn a brand book into a theme and page.
• Page anatomy: choose components for headers, content, and footers.
• Layout: compose page shells and align their content.
• Forms: label fields, validate input, and submit data.
• Help system: add contextual help and page-level help panels.
• SVG icons: configure an icon sprite and use it in components.
• Images and banners: crop images, add overlays, and build banners.
• Video: configure posters, captions, and fallback sources.
• Font picker: load font assets and configure the catalog.

Browse the component reference for properties, events, slots, and examples, or the API reference for exported types and helpers.

Configure the design system

• Color: seed colors, palette generation, contrast, and theme fitting.
• Typography: type sizes, text roles, and fluid spacing.
• Styling reference: public CSS properties and editor integration.
• Tokens, intents, and contexts: choose the right scope for a style change.

Integrate and upgrade

• Browser support: minimum versions and polyfills.
• Browser automation: interact with controls through roles and labels.
• Caveats: compatibility details and known limitations.
• Migrating to Espalier 5: removed compatibility paths and form changes.
• Migrating to Espalier 4: public event and export replacements.
• Migrating to Espalier 3: replace variant with intent and context.

Contribute

Read documentation authoring before changing component examples or guides. AI development covers prompts and contract checks for projects that use Espalier.