Ink Logo
Ink Logo The reactive web component template engine. Get Started Read the Docs
Ink is a modern HTML markup language and a server first template engine with a built-in parser/compiler that generates web components and supports reactivity.
<style> h1 { font-weight: bold; } </style> <script> const name = 'world'; </script> <h1>Hello {name}!</h1>

Hello world!

  • Expressive Markup

    Any data type as attributes. Easily express logic with markup directives like if, each, and try catch.

  • Reactive Signals

    Easily transition from backend logic to reactive states. No Hydration and no memoization needed.

  • Bare Metal

    Work with the DOM directly. Import any web components from any source. Works with Lit, HTMX.

Server Setup

Ink can be used with popular server frameworks in just a few lines of code. import ink from '@stackpress/ink/compiler'; //make a ink compiler const compiler = ink(); //render HTML const results = compiler.render('./page.ink');

Props

Import your component props and use immediately
<style> h1 { font-weight: bold; } </style> <script> import { props } from '@stackpress/ink'; const { name } = props(); </script> <h1>Hello {name}!</h1>

Hello world!

Reactive Signals

Use signals to manage state changes and re-renders.
<style> h1 { font-weight: bold; } </style> <script> import { signal } from '@stackpress/ink'; const name = signal('world'); name.value += '!'; </script> <h1>Hello {name.value}</h1>

Hello world!

Components and Templates

Import components and templates for reusability.
<!-- page.html --> <link rel="import" href="./my-heading.html" /> <script> const name = 'world'; </script> <my-heading {name}>Hello</my-heading> <!-- my-heading.html --> <script> import { props } from '@stackpress/ink'; const { name, children } = props(); </script> <h1>{children} {name}</h1>

Conditionals and Iterations

Case for conditions and iterations in an expressive way.
<script> const name = 'world'; const show = name === "world"; </script> <if true=show> <h1>Hello {name}</h1> </if> <script> const list = [ 'a', 'b', 'c' ]; </script> <ul> <each key=i value=item from=list> <li>{i}: {item}</li> </each> </ul>

Works With Popular Server Frameworks

Express Fastify Hapi Koa NestJS Restify

Ink Loves Developers!

Im a vue developer. No need for this. OSSPH does not support this project.

Ink? Never heard of it...
"The Name..."

Ink is good news for Node developers. I'm a rust developer so it don't matter to me.

Ink copied this section from us. We are the original.

After creating the Ink project, I am really excited to get back to ReactJS.

Ink? no thanks. Keep your stack front end. App router for life.

What are you waiting for?

Get Started Read the Docs