Temple Logo

Temple

Temple Logo

Temple

The reactive web component template engine. Get Started Read the Docs
Temple 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

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

Props

Import your component props and use immediately
<style> h1 { font-weight: bold; } </style> <script> import { props } from '@ossph/temple'; 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 '@ossph/temple'; 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 '@ossph/temple'; 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

Temple Loves Developers!

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

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

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

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

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

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

What are you waiting for?

Get Started Read the Docs