Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
304 changes: 172 additions & 132 deletions README.md

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,7 @@
"./octane/net": "./framework/src/net-api.ts",
"./octane/renderer": "./framework/src/renderer-octane.ts"
},
"description": "High-performance JSX UI outside the browser, with native rendering, standard Vue Vapor and Solid support, a Tailwind design system, and 60 FPS animation under an 8 MB memory budget.",
"description": "A portable application runtime that turns modern component code into native pixels across radically different hardware: Solid, Vue Vapor and Octane over a native Rust core, with build-time Tailwind styling and 60 FPS animation under an 8 MB memory budget.",
"scripts": {
"bootstrap": "bun tools/bootstrap.ts",
"pocket": "bun tools/pocket.ts",
Expand Down
2 changes: 1 addition & 1 deletion site/build.ts
Original file line number Diff line number Diff line change
Expand Up @@ -668,7 +668,7 @@ async function main() {
// styles. Display faces come from Google Fonts; the fallback stacks keep the
// page readable when that request fails.
const HOME_DESC =
"PocketJS is a UI runtime that keeps JSX, Tailwind and reactive state, then removes every layer below them: no DOM, no CSS engine, no WebView. A QuickJS guest on a Rust core that lays out and draws every pixel itself.";
"PocketJS is a portable application runtime that turns modern component code into native pixels across radically different hardware. JSX, Tailwind and reactive state stay; no DOM, no CSS engine, no WebView, just a QuickJS guest on a Rust core that lays out and draws every pixel itself.";
const escapeHtml = (s: string) =>
s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");

Expand Down
7 changes: 4 additions & 3 deletions site/content/docs/architecture.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
# Architecture

PocketJS is a JSX UI stack that runs apps on real Sony PSP and PS Vita hardware,
in PPSSPP and Vita3K, in desktop/browser hosts, and under headless Bun. It gets
there with one principle:
PocketJS is a portable application runtime that turns modern component code
into native pixels across radically different hardware: real Sony PSP and PS
Vita units, PPSSPP and Vita3K, desktop and browser hosts, and headless Bun. It
gets there with one principle:
**one Rust core, framework-specific JS adapters, one layout engine everywhere.**

The JavaScript side can be Solid, Vue Vapor, or Octane. Solid uses its
Expand Down
7 changes: 4 additions & 3 deletions site/content/docs/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,10 @@

This is the fastest path from an empty checkout to JSX running on screen. You'll
write a component, mount it, build it, and see it in the browser dev host — the
same source and `pocket.json` can also be compiled into target-specific PSP and
PS Vita packages. The logical 480×272 UI stays portable while each target owns
its native renderer, raster density, and HostOps ABI.
same source and `pocket.json` can also be compiled into target-specific packages
for PSP, PS Vita, and the other registered targets. The logical 480×272 UI stays
portable while each target owns its native renderer, raster density, and HostOps
ABI.

If you only want to *try* PocketJS, skip the toolchain entirely and open the
online [Playground](/playground/): it runs the Rust core as WebAssembly in your
Expand Down
13 changes: 7 additions & 6 deletions site/content/docs/overview.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
# Overview

PocketJS lets you build **Solid**, **Vue Vapor**, or **Octane** interfaces for
Sony PSP and
PS Vita hardware. It compiles class strings and font glyphs at build time, then
renders real flexbox, sub-pixel text and native animation through a compact
`no_std` Rust core. One application manifest resolves into target-specific PSP
and Vita artifacts; browser, desktop, PPSSPP/Vita3K, and headless hosts exercise
PocketJS is a portable application runtime that turns modern component code
into native pixels across radically different hardware. You write **Solid**,
**Vue Vapor**, or **Octane** components; the runtime compiles class strings and
font glyphs at build time, then renders flexbox layout, sub-pixel text and
native animation through a compact `no_std` Rust core. One application manifest
resolves into target-specific artifacts, from Sony PSP and PS Vita packages to
desktop and e-reader hosts; browser, PPSSPP/Vita3K, and headless hosts exercise
the same logical UI and HostOps semantics.

If you know Solid, Vue, or React, you already know most of PocketJS. The
Expand Down
9 changes: 5 additions & 4 deletions site/home.html
Original file line number Diff line number Diff line change
Expand Up @@ -50,12 +50,13 @@
<div class="wrap hero-in">
<div class="col">
<div class="plate">
<h1><span class="metal lit">A very ambitious<br>UI runtime.</span></h1>
<h1><span class="metal lit">UI runtime for<br>every kind of<br>computer</span></h1>
<span class="rail"></span>
</div>
<p class="sub">PocketJS is a UI runtime that keeps JSX, Tailwind and reactive state, then
<strong>removes every layer below them</strong>: no DOM, no CSS engine, no WebView. What is left is a
QuickJS guest on a Rust core that lays out and draws every pixel itself.</p>
<p class="sub">PocketJS is a portable application runtime that turns modern component code into
<strong>native pixels across radically different hardware</strong>. JSX, Tailwind and reactive state
stay; every layer below them is gone: no DOM, no CSS engine, no WebView, just a QuickJS guest on a Rust
core that lays out and draws every pixel itself.</p>
<div class="ctas">
<a class="btn btn--pri" href="#ecosystem">See use cases</a>
<a class="btn btn--sec" href="https://github.com/pocket-stack/pocketjs">Star on GitHub</a>
Expand Down
4 changes: 2 additions & 2 deletions site/templates.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@ const X_URL = "https://x.com/pocket_js";
export const SITE_URL = "https://pocketjs.dev";
export const SITE_TITLE = "PocketJS · JavaScript UI runtime";
export const SITE_DESC =
"A compact JavaScript runtime for building UI, games, 3D experiences and AI-native applications across radically different devices. A tiny JavaScript guest where it fits; the framework compiled away where it doesn't.";
"PocketJS is a portable application runtime that turns modern component code into native pixels across radically different hardware. Solid, Vue Vapor and Octane components compile to one native tree that a Rust core lays out and draws, with no DOM, CSS engine or WebView underneath.";
// Shared by the standalone homepage and every page rendered through renderPage().
export const SITE_FOOTER_DESC =
"A compact JavaScript runtime for UI, games, 3D and AI-native software, carried to radically different devices by a tiny native core.";
"A portable application runtime that turns modern component code into native pixels, carried to radically different hardware by a compact native core.";
export const SITE_FOOTER_DESC_SLOT = "{{SITE_FOOTER_DESC}}";
export const OG_IMAGE_URL = `${SITE_URL}/og-image.png`;

Expand Down
6 changes: 4 additions & 2 deletions tests/site-stage.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -83,8 +83,10 @@ test("homepage ships the four-chapter landing", () => {
expect(home).toContain('class="hero-bg"');
expect(home).toContain("/assets/pocketjs-demo-wall.mp4");
expect(home).toContain("/assets/pocketjs-demo-wall.jpg");
expect(home).toContain("A very ambitious");
expect(home).toContain("PocketJS is a UI runtime that keeps JSX, Tailwind and reactive state");
expect(home).toContain("UI runtime for<br>every kind of<br>computer");
expect(home).toContain(
"PocketJS is a portable application runtime that turns modern component code into",
);
for (const file of ["site/home.html", "site/bake-demo-wall.ts", "site/content/blog/pocket-figma.md"]) {
expect(readFileSync(ROOT + file, "utf8")).not.toContain("figma-psp-cover-zoom");
}
Expand Down