First Things First
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.
mkdir hello-palette
cd hello-palette
bun init -y .
touch index.html
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 using any JS/TS package manager, or via CDN.
If you just want to try it out, the easiest way is to import from the CDN right in your HTML file:
<script module src="https://cdn.palette.surf/pkg/palette/0.1.0-rc.1/palette.js"></script>
For Bun, start by adding the install scope to a bunfig.toml file in the root
of your project (or in your user directory for global configuration):
[install.scopes]
"@rusticarcade" = "https://git.astral.camp/api/packages/rusticarcade/npm"
Then install as usual:
bun i @rusticarcade/palette
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>Hello, world!</p>`,
styles: css`
:host {
--color: red;
}
p {
color: var(--color);
font-size: 2rem;
font-style: italic;
}
`;
script() {
const rgb = [
Math.floor(Math.random() * 255),
Math.floor(Math.random() * 255),
Math.floor(Math.random() * 255),
];
setInterval(() => {
this.style.setProperty("--color", `rgb(${rgb.join(",")})`)
}, 2000);
}
})
And you've done it. You can now enjoy your flashy "Hello World," or read on for more ways to build cool stuff with Palette.