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

You'll need an existing 11ty site to get started. If you're new to 11ty, you can make your first project using the lovely guide + community resources over here.

Then, you can install Slinkity into your project repo like so:

# First, uninstall any existing version of 11ty in your project!
# Slinkity will go install the latest "canary" build
npm uninstall @11ty/eleventy

npm i --save-dev slinkity

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

1. Start up 11ty in --watch mode to listen for file changes
2. 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).

About that canary build: For Slinkity to work properly, we're relying on the latest "experimental" build of 11ty. This could involve some gotchas with existing 11ty plugins. If anything unexpected happens, let us know on our GitHub issues page.

📚 Find our full documentation 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:

*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.