Slinkity Brings Astro-style Components to Eleventy

Astro’s main appeal is bringing modern JavaScript component authoring to the static site generator world without shipping any client-side JavaScript unless you explicitly opt in. Eleventy shares that HTML-first philosophy, but its templating options feel less modern. A new project from Ben Holmes, Slinkity, aims to close that gap by layering component framework support onto Eleventy.

Key features of Slinkity include:

  • Component framework support: Use React, Vue, or Svelte for page and layout templates. Convert an existing .html or .liquid file to .jsx and start building routes with React immediately.
  • Shortcodes for existing pages: Insert components into markdown, HTML, Nunjucks, or other template files with a single line such as {% react './path/to/component.jsx' %}.
  • Client-side hydration: Component-driven pages are hydrated automatically, so dynamic state management works in both development and production with zero extra configuration.
  • Optional single-page app mode: Turn the site into an SPA to enable features like animated page transitions and persistent state across pages.

The project appears to bring the Astro development experience to Eleventy, and notably uses Snowpack, the same build tool created by the Astro team. Slinkity is available at slinkity.dev.