Sinth
Reactive and fun.

Sinth is a declarative language that compiles to pure HTML, CSS, and JavaScript. No runtime library. No virtual DOM. No framework shipped to your users.

Install Sinth See the syntax
Declarative
Reactive
Easy
Fast

Syntax

Easy. You'll understand it.

Logic near UI makes it easy to creative Reactive Content.

my-cool-code.sinth
page

import "components/Navbar.sinth"
import SinthUI

title = "My Sinth Project"
fav   = "assets/fav.webp"
descr = "Does this really work?"

var str userName

Main {
    Hero {
        Heading(level: 1) { "Welcome to Sinth" }
        Input(bind: userName)
        Paragraph() { "Hello, " + userName }
    }
}

Features

Why choose Sinth?

It's like HAML.. just a bit cooler

Importing? More like built-in!
Logic and reactivity which is needed anyway, is built-in!
Declarative Syntax
Component trees read like prose. Braces define nesting. Named parameters make every attribute self-documenting. Inspired by SwiftUI!
Shared Runtime
Big project? Use sinth build --shared-runtime to share one runtime!
SCSS Built-in
Add style lang="scss" and write nested selectors, variables, and mixins. The compiler runs Sass at build time. No loader config required.
Web Components, First-Class
Declare custom elements with custom-element syntax. Attributes are typed with defaults. The compiler writes the class for you.
Error Source Preview
Sinth won't leave you in the dark. Intelligent warnings and error messages guide you through your first steps with Sinth!
Sinth File
No need to import thousand Libraries in a JS file to use Sinth. Create a .sinth-file and start coding!
HTML5 Surface
Every standard HTML element has a corresponding Sinth component. If not, they'll get added!
Dev Server with Live Reload
sinth dev starts a local server with SSE-based live reload. Edit any .sinth file and the browser refreshes instantly.

Comparison

How it stacks up.

Sinth brings together capabilities that previously required multiple tools, plugins, and configuration files.

CapabilitySinthPlain HTMLJSX / ReactVue SFCSvelte
Reactive✓—✓✓✓
Declarative syntax✓—✓✓✓
CSS support✓——✓✓
SCSS built-in✓————
Two-way binding✓——✓✓
Tree-shaken JS output✓———✓
Custom element syntax✓✓———
Single-file components✓N/A—✓✓
Asset pipeline built-in✓————
Error source preview✓—✓✓✓
No build config required✓✓———
Output is readable HTML✓✓———
Type-safe attributes✓—✓ (TS)✓ (TS)✓ (TS)
Learning curveLowLowMediumMediumLow–Med

Install

Start the fun.

Install the compiler from npm, scaffold a new project, and start the dev server. Your first page renders in the browser before you've had time to configure anything.

Read the Docs Try in browser via CDN ↗
$ npm install -g @yannosay/sinth
$ sinth init my-sinth-site
$ cd my-sinth-site && sinth dev pages/index.sinth

Requires Node.js 18+. Powered with TypeScript.

How I see it

Just think. And write that down.

How I describe Sinth

Coding should be fun! No exhausting debug sessions for tiny reactive buttons! Using Sinth is super easy. If you know how to deploy HTML sites, you can use Sinth. It's that easy.

The language is designed to describe UI, not switching between three different languages!

What you wont find

  • eval() in code :)
  • e.target.value
  • useEffect chains
  • JSX ternaries