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 the simplest way to handle styles and component frameworks on your 11ty site. Once installed, this:
- 🚀 Unlocks component frameworks like React for writing page templates and layout templates. Turn an existing
.htmlor.liquidfile into a.jsxfile, and you're off to the componentized races. - 🔖 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: {% raw %}
{% react 'path/to/component' %}{% endraw %} - 💧 Hydrates these components when and how you want. Use component frameworks as a static template to start, and opt-in to shipping JS as needed with our partial hydration helpers.
- 💅 Bundles all your resources with the power of Vite. Use your favorite CSS preprocessor, JS minifier, and more with minimal config.
📣 Find our full announcement post here →
Technologies used
Slinkity stands on the shoulders of giants. You can think of Slinkity as the "glue" binding 2 tools together:
- Eleventy: a static site generator with a rich feature set for fetching data, composing layouts, and inserting content with "shortcodes."
- Vite: a bundler that takes the boilerplate out of your set up. It'll compile JS component frameworks, handle CSS preprocessors with little-to-no config (say, SCSS and PostCSS), and show dev changes on-the-fly using hot module replacement (HMR).
Getting started
Use our handy CLI command to spin up a Slinkity site: npm init slinkity. This demos our core functionality while staying as lean as possible, making it the perfect launchpad for new projects 🚀
To learn more, and explore adding Slinkity to existing 11ty projects...
🐣 See our "quick start" guide →
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 support today. For reference, here's our complete roadmap of current and upcoming features:
| Feature | Status |
|---|---|
| CLI to run 11ty and Vite simultaneously | ✅ |
| React component pages & layouts | ✅ |
| React component shortcodes | ✅ |
| SCSS and SASS | ✅ |
| PostCSS config (ex. Tailwind) | ✅ |
| CSS imports via ESM (including CSS modules) * | ⏺ |
| Plugin ecosystem for your favorite component framework | |
| (Vue, Svelte, Solid, etc) | ⏳ |
| Eleventy serverless compatibility | ❌ |
| Shared state between component shortcodes | ❌ |
| Styled components & Emotion | ❌ |
*CSS imports will work today, but with one caveat: stylesheets will bleed to other routes on your site. We're actively working on a fix!
- ✅ = 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.