Slinkity

🚧 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:

🚀 Unlocks component frameworks (like React) for writing page templates and layout templates. So, you can turn an existing .html or .liquid file into a .jsx file, and immediately start building routes using React.
🔖 Includes powerful shortcodes to insert components into existing pages. Add a line like this to your markdown, HTML, Nunjucks, etc, and watch the magic happen: {% react './path/to/component.jsx' %}
💧 Hydrates these component-driven pages on the client. In other words, all your dynamic state management will work in development and production with 0 extra setup.

📣 Find our full announcement post here →

Quick start

All you need is an empty directory to get started! But if you prefer a starter project with some pre-populated content, you can use the lovely guide + community resources over on the 11ty docs.

Installation

First, install Slinkity + the latest 11ty into your project repo like so:

Slinkity requires Node v14 and up. You can check your version by running node -v in your terminal before trying Slinkity.

npm i --save-dev slinkity @11ty/eleventy@beta

Slinkity relies on 11ty's latest 1.0 beta build to work properly. Yes, this could involve some gotchas with existing 11ty plugins! If anything unexpected happens, let us know on our GitHub issues page.

...and run our CLI command to spin up the dev server:

npx slinkity --serve
# Also consider the --incremental flag
# for faster builds during development

Now you're off to the races! This command will:

Start up 11ty in --watch mode to listen for file changes
Start up a Vite server pointed at your 11ty build. This helps us process all sorts of file types, including SASS styles, React components, and more 🚀

When you're ready for a production build, just run:

npx slinkity

...and your shiny new site will appear in the _site folder (or wherever you tell 11ty to build your site).

📚 Dive in to the docs here →

Feature set

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.

✅ = Ready to use
⏺ = Partial support
⏳ = In progress
❌ = Not started (but on roadmap)

Have an idea? Notice a bug?

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.