Joyful Web Development
Palette is a web application development framework which uses native web technologies while providing a lovely developer experience with zero external dependencies or build step required.
This guide will walk you through getting started with Palette.
Option 1: CDN Browser Import
Palette is available for use via the Palette CDN. To include Palette on any webpage, just import it inside a script module:
<!-- Development Bundle, has clear errors, dev warnings, but is larger -->
<script type="module">
import { define } from "https://cdn.palette.surf/pkg/palette/latest/palette.dev.js"
</script>
<!-- Production Bundle, much smaller with no warnings and terse errors -->
<script type="module">
import { define } from "https://cdn.palette.surf/pkg/palette/latest/palette.js"
</script>
Since Palette does not require a build step, it works right in the browser with standard JavaScript:
<!doctype html>
<html lang="en-US">
<head>
<!-- Define our component right here because we can! -->
<script type="module">
import { define, html, css } from "https://cdn.palette.surf/pkg/palette/latest/palette.dev.js";
define("hello-world", {
template: html`<p>${"$greeting"}, world!</p>`,
style: css`
:host {
color: red;
}
`,
initialState: { greeting: "Hello" },
script() {
setInterval(() => {
this.state.greeting += "o";
}, 1000);
}
});
</script>
</head>
<body>
<hello-world></hello-world>
</body>
</html>
Option 2: Using a Package Manager
In this section, we'll scaffold a small project using Bun as the package manager and bundler. This way, we can install the library with its TypeScript definitions and other utilities for a better developer experience.
We're going to need a project. Make a directory called hello-palette and
initialize a project. We will also need an index.html file, so make that too.
bun init -y hello-palette
touch hello-palette/index.html
cd hello-palette
Our directory should now more or less look like:
+ Project Root
|- index.html
|- index.ts
|- package.json
|- tsconfig.json
|- node_modules/
|- bun.lock
Start by opening up index.html and adding in some basic scaffolding:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>My Palette Webapp</title>
<!-- We'll import the index.ts file and write our code there -->
<script module src="./index.ts"></script>
</head>
<body>
<!-- This will be our component! -->
<hello-world></hello-world>
</body>
</html>
And now we get to the good part.
Install Palette
Palette is available to install via any NPM-compatible package manager:
bun add @rusticarcade/palette
npm i --save @rusticarcade/palette
yarn add @rusticarcade/palette
Other Installation Options
If you would prefer to install directly from the Palette hosted NPM repository,
you can configure your package manager to use this URL for @rusticarcade scoped
packages:
https://git.astral.camp/api/packages/rusticarcade/npm
For example, to set up Bun to use this repository, set this in your bunfig.toml:
[install.scopes]
"@rusticarcade" = "https://git.astral.camp/api/packages/rusticarcade/npm"Making the Component
Now, open up index.ts and plop in a basic Palette component:
import { define, html, css } from "@rusticarcade/palette";
define("hello-world", {
template: html`<p>${"$greeting"}, world!</p>`,
style: css`
:host {
color: red;
}
`,
initialState: { greeting: "Hello" },
script() {
setInterval(() => {
this.state.greeting += "o";
}, 1000);
}
});