Slinkity

What is it?

Slinkity is the simplest way to handle styles and component frameworks on your 11ty site. Once installed, this:

🚀 Unlocks component frameworks like React, Vue, and Svelte for writing page templates. Turn an existing .html or .liquid file into a .jsx|tsx|vue|svelte file, 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: {% island 'path/to/Component.*' %}
💧 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.

Let's see Slinkity in action ✨

Our philosophy

We built this tool to address an age old question: "what should I use to build my website?"

This stumps newbies and professionals alike. In the static site space, we have 2 competing camps:

The "simple" site generator driven by data and templating languages (markdown, HTML, liquid, etc). This approach avoids JavaScript bundles and component frameworks like React in favor of straight HTML and CSS. This camp is mostly dominated by Jekyll, Hugo, and our favorite, 11ty.
The "dynamic" site generator driven by component frameworks like React, Vue, and Svelte. These output simple HTML and CSS like the first camp, along with a bundle of JS to enable dynamic user interactions. Think image carousels with arrow buttons, animated page transitions as you explore the site, and other assorted, code-driven whimsy. This camp includes NextJS, GatsbyJS, SvelteKit, and more.

There's some clear value to both approaches. The first dramatically reduces build times and load times for the user by avoiding JavaScript processing. The second empowers your site to do something more should you ever need it, at the cost of a large code bundle and steeper learning curve.

But we're faced with a dilemma: if we ever want to switch camps, we'll have to rewrite our site from scratch in a different tool. This costs time, money, and user experience if anything goes wrong 😢

This is what Slinkity is built for. With our approach, you can:

Start building your static site with 11ty. This means a lower learning curve, fast buildtimes, and a strong developer community.
When (or if) you need some dynamic user interactions, you're free to add React, Vue or Svelte components to your existing site with zero extra setup. This could mean embedding components into existing templates using shortcodes (i.e. {% react 'FancyComponent.js' %}), or replacing page and layout templates with components entirely (i.e. converting a liquid or HTML file into a JSX file).

So start in the first camp, with zero cost of switching to the second.

How can I jump in?

This project is still heavily under development in an early alpha phase. But if you're excited to try it out, head to our quick start guide!

We don't want to stay alpha forever though. For those with feature requests, bug reports, and a love for open source, now's a great time to get involved. Head to our CONTRIBUTING guide to learn more ❤️