Sinth Compiler

Sinth enables faster, easier and reactive HTML coding.

• Declarative: Sinth makes it super easy to create reactive code. Declarative code helps you understand your code more easily and simplifies debugging.
• Simple to setup: You don't need to download 5 different packages. Download Sinth, create .sinth files, and easily transform them into usable HTML right in your CLI.

Install

• To install Sinth, use this command:
  • npm install -g @yannosay/sinth

The Sinth compiler is designed as a CLI tool that should work from anywhere. Therefore, it is best installed globally.

Init

• You can initialize your Sinth project via your CLI:
  • sinth init my-sinth-project
  • cd my-sinth-project
• After that's done, you can start a Dev Server to preview your change:
  • sinth dev pages/index.sinth

Documentation

You can find the complete documentation, including all notes and tips here.

Usage

page

title = "Increment Showcase"
fav = "./assets/fav.ico"

var str userName = "User"
var int count = 0
Main {
    Heading(level: 1) { count }
    Button(onClick: count += 1) { "Increment" }
    Input(bind: userName, placeholder: "Type in your username")
    Paragraph() { userName + " has reached Count " + count + "!" }
}

Feature Overview

• Mixed logic
• Two-way binding
• Reactive Sinth variables
• Import own Components
• Expression-based delays
• Object support
• Object iteration
• SCSS support
• Tree-shaken output
• VS Code extension
• Live reload dev server
• Self-contained HTML
• Reactive Sinth variables affecting CSS
• Reactivity in functions
• Exporting custom HTML Tags to use in non-sinth HTML Projects

Security

Sinth's reactive runtime environment does not use eval(). Every expression is precompiled into optimized JavaScript functions at build time. This is intended to make using Sinth more secure.

Should you nevertheless discover a security issue, you can help us by submitting a security vulnerabilities report. For more information, view our Security policy.

Support

If you have encountered a problem and need assistance, please open an issue in our repository or join our Discord server for general support.

Commands

• sinth init [name]
• sinth dev [file]
• sinth build [file] [--shared-runtime]
• sinth check [file]
• sinth version

Additional Links

• Official Sinth Repo: Visit on GitHub
• Website: Yannosay Production Website
• Discord: Join here
• VS Code Extension: Download here

License

AGPL-3.0

Notice: All generated output you made with Sinth is entirely your intellectual property and free of any license obligations of Sinth.