What is Fortis?

Fortis is another JSX library. It's a bit different from the others though:

All JSX Elements are native DOM elements
Class components are Web Components (opens in a new tab)
Function components do not create Shadow DOM, but can be used to create reusable components

Why Fortis?

Native - No Virtual DOM, no custom event system, no custom lifecycle methods, no custom anything. Fortis is just native DOM and native JavaScript.
Fast - Fortis is fast because it's native. It's also fast because it's small. The entire library is less than 1.5 kB gzipped.
Simple - Fortis is easy to learn. If you know JSX, you know Fortis.
Well-Typed - Fortis is written in TypeScript and comes with its own type definitions. This means that you get full type safety out of the box.

Installation

npm install fortis

Usage

demo.tsx

import {f, Component, Required} from 'fortis';
 
class WebComponent extends Component({
    message: Required.string
}) {
    static css = `
        :host {
            display: block;
            padding: 1rem;
            border: 1px solid black;
        }
    `;
 
    render() {
        return (
            <div title={this.props.message}>
                {this.props.children}
            </div>
        );
    }
}
 
const App = () => (
    <WebComponent message="Hello World">
        <h1>Hello World</h1>
    </WebComponent>
);
 
document.body.appendChild(<App />);

Inspiration

Fortis is inspired by Lit (opens in a new tab) and Preact (opens in a new tab). It's also heavily influenced by React (opens in a new tab) and JSX (opens in a new tab).

However, Fortis is not a clone of any of these libraries. It's a unique library with its own set of features and goals. Fortis is not meant to be a replacement for any of these libraries, but rather an alternative for those who want something different.

Components