Overview

🚧 This project is heavily under construction! 🚧 As excited as you may be, we don't recommend this early alpha for production use. Still, give it a try if you want to have some fun and don't mind logging bugs along the way :)

Slinkity is a tool for bringing dynamic, clientside interactions to your static 11ty site. Once installed, this:

📣 Find our full announcement post here →

🐣 Jump in with our "quick start" guide →

Slinkity stands on the shoulders of giants. You can think of Slinkity like the "glue" holding 2 services together:

  1. Eleventy: a static site generator with a rich feature set for fetching data, composing layouts, and inserting content with "shortcodes."
  2. Vite: a bundler that takes the boilerplate out of JavaScript development. It'll spin up a dev server for you, re-process components on the fly using hot module replacement (HMR), and optimize your production build using Rollup.

This project is still in early alpha, so we have many features soon to come! This demo covers a majority of features we plan to support. For reference, here's our tentative roadmap to version 1.0:

Feature Status
CLI to run 11ty and Vite simultaneously
React component pages & layouts
React component shortcodes
SASS support
CSS module support*
First-class page transition library
Single page app capabilities
Vue component pages, layouts and shortcodes
Svelte component pages, layouts and shortcodes
Tailwind support
Styled components & Emotion support

*CSS modules will work with JavaScript enabled. However, disabling JavaScript or rendering your components as "static" will break this behavior.

We'd love to hear your feedback! Feel free to log an issue on our GitHub issues page. If your question is more personal, our Twitter DMs are always open as well.