https://github.com/stackpress/ink
A web component template engine.
https://github.com/stackpress/ink
Last synced: 12 months ago
JSON representation
A web component template engine.
- Host: GitHub
- URL: https://github.com/stackpress/ink
- Owner: stackpress
- License: apache-2.0
- Created: 2024-10-02T00:33:50.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-11T14:00:13.000Z (about 1 year ago)
- Last Synced: 2025-04-05T21:03:56.192Z (12 months ago)
- Language: Ink
- Size: 29.3 MB
- Stars: 7
- Watchers: 1
- Forks: 9
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Install
```bash
$ npm -i @stackpress/ink
```
## Compiler Usage
```js
//on server:
import ink from '@stackpress/ink/compiler';
//make a ink compiler
const compiler = ink();
//render HTML
const results = compiler.render('./page.ink');
//show HTML
console.log(results);
```
## Ink Markup
**Basic Markup**
```html
const name = 'world';
Hello {name}!
```
**Markup with Styles**
```html
:host {
color: purple;
}
:host h1 {
font-family: 'Comic Sans MS', cursive;
font-size: 2em;
}
const name = 'world';
Hello {name}!
```
**Markup with Props**
```html
import { props } from '@stackpress/ink';
const { name } = props();
Hello {name}
```
**Markup with Reactivity**
```html
import { signal } from '@stackpress/ink';
const name = signal('world');
const add = () => name.value += '!';
Hello {name.value}
```
**Markup with Imports**
```html
const name = 'world';
Hello
```
```html
import { props, children } from '@stackpress/ink';
const { name } = props();
{children()} {name}
```
**Markup with Conditional**
```html
const name = 'world';
const show = name === "world";
Hello {name}
```
**Markup with Loops**
```html
const list = [ 'a', 'b', 'c' ];
- {i}: {item}
```
**Document Markup**
```html
body {
background-color: #DA532C;
color: #EFEFEF;
}
{title}
```
## Why Ink?
Current frontend solutions for the most part, come in the form of a
"frontend framework" and are "all encompassing", requiring more import
into the frontend framework and give little export out to support server
first solutions. Ink is a modern HTML markup language and a server
first template engine with a built-in parser/compiler that generates
web components and support reactivity.
Ink works with most server frameworks including:
- [Express](https://github.com/stackpress/ink/tree/main/examples/with-express)
- [Fastify](https://github.com/stackpress/ink/tree/main/examples/with-fastify)
- [Hapi](https://github.com/stackpress/ink/tree/main/examples/with-hapi)
- [Koa](https://github.com/stackpress/ink/tree/main/examples/with-koa)
- [NestJS](https://github.com/stackpress/ink/tree/main/examples/with-nest)
- [Webpack](https://github.com/stackpress/ink/tree/main/examples/with-webpack)