A Simpler Web Framework
We felt like modern web frameworks are often doing too much if you just want to build a simple, fast website.
deno -A jsr:@sapling/create
export function HelloWorld() {
return (
<!-- Yup, Tailwind is built in -->
<div className="w-full h-full flex items-center justify-center bg-black rounded-lg">
<p className="py-4 px-6 text-4xl text-white">Hello, World!</p>
</div>
);
}const counterScript = `
import canvasConfetti from "https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/+esm";
let count = 0;
window.increment = () => {
count++;
const counterElement = document.getElementById("counter-count");
if (counterElement) {
counterElement.textContent = count.toString();
}
if (count === 3) {
canvasConfetti({ particleCount: 100, colors: ["#cdac26", "#d0d0d1", "#292929", "#1b791f"], spread: 70, origin: { y: 0.6 } });
}
};
`;
export function Counter() {
return (
<sapling-island loading="visible">
<template>
<script type="module" dangerouslySetInnerHTML={{ __html: counterScript }}></script>
</template>
<div className="w-full h-full flex items-center justify-center">
<button
id="counter-button"
onclick="window.increment?.()"
className="px-6 py-3 bg-gray-900 @dark:bg-white text-white @dark:text-gray-900 font-medium rounded-full hover:bg-gray-800 @dark:hover:bg-gray-100 transition duration-150 flex items-center gap-2">
Click Count: <span id="counter-count">0</span>
</button>
</div>
</sapling-island>
);
}const motionScript = `
import { animate } from "https://cdn.jsdelivr.net/npm/motion@latest/+esm";
animate(
".motion-box",
{ rotate: 90 },
{ type: "spring", repeat: Infinity, repeatDelay: 0.2 }
);`;
export function MotionExample() {
return (
<sapling-island loading="visible">
<template>
<script type="module" dangerouslySetInnerHTML={{ __html: motionScript }}></script>
</template>
<div className="w-full h-full flex items-center justify-center">
<div className="motion-box w-[100px] h-[100px] bg-foreground rounded-lg"></div>
</div>
</sapling-island>
);
}Hello, World!
A simple tool for building
modern websites
If you know HTML, CSS, Tailwind, and JavaScript, you can build a website with Sapling.
SEO & Performance First
Sapling is built for speed. Using web development best practices for SEO and performance.
Zero JavaScript by Default
Sapling doesn't output any javascript out of the box. Just good old HTML and CSS.
Islands Architecture
Add interactivity only where you need it. Keep the rest of your site fast and lightweight.
Basic by Design #usetheplatform
Build with JavaScript, TypeScript, HTML, and CSS. We don't tie you to any specific framework or bundler which means you can use what you want.
Build Faster with Uncursor
Use our AI website generator to get a Sapling project live on the web in seconds
Get Started with UncursorFrequently Asked Questions
Sapling is a lightweight web framework for building server-rendered websites with TypeScript. It's designed to be simple, fast, and easy to learn while providing modern development features.
Sapling offers: Zero client-side JavaScript by default, simple intuitive HTML templating, first-class TypeScript support, fast server-side rendering, works with any JS runtime such as Deno, Node.js, Bun, etc., no build step required, and code that embraces web standards rather than fights them.
Yes, because Sapling is more of a bare bones server side framework that generates HTML you can use any frontend framework you prefer in specific parts of your website/application. We might be biased but we think most sites are better off with plain old HTML, CSS, and JS with a sprinkling of framework specific components.
While Sapling is built with TypeScript, you can write your code in JavaScript if you prefer. However, using TypeScript provides better developer experience with type checking and IDE support.
No, Sapling works with all major JavaScript runtime environments including Deno, Node.js, Bun, and CloudFlare Workers. You'll find that we use Deno often in documentation and examples because it's our preferred runtime with built-in TypeScript support which allows us to skip the configuration and build step.