Uzumaki

Native desktop UI framework for JavaScript and TypeScript

Note

Uzumaki is in early alpha. Expect breaking changes between releases.

Quick Example

import { useState } from 'react';
import { Window } from 'uzumaki';
import { createRoot } from 'uzumaki-react';

const window = new Window('main', {
  width: 800,
  height: 600,
  title: 'My App',
});

function App() {
  const [count, setCount] = useState(0);

  return (
    <view
      display="flex"
      flexDir="col"
      w="full"
      h="full"
      items="center"
      justify="center"
      bg="#0f0f0f"
      gap={16}
    >
      <text fontSize={32} fontWeight={700} color="#e4e4e7">
        Welcome to Uzumaki
      </text>
      <text fontSize={18} color="#a1a1aa">
        Count: {count}
      </text>
      <button
        onClick={() => setCount((value) => value + 1)}
        px={24}
        py={10}
        rounded={8}
        bg="#2d2d30"
        hover:bg="#3e3e42"
      >
        <text fontSize={16} color="#60a5fa">
          Increment
        </text>
      </button>
    </view>
  );
}

createRoot(window).render(<App />);

Package Model

• uzumaki is a built-in runtime module
• uzumaki-react provides the React renderer
• uzumaki-types provides TypeScript declarations for the built-in runtime

Install

macOS / Linux

curl -fsSL https://uzumaki.run/install.sh | sh

Windows

irm https://uzumaki.run/install.ps1 | iex

Then create a project:

uzumaki init my-app
cd my-app
pnpm install
pnpm dev

Links

• Docs
• GitHub
• Contributing
• Development

Acknowledgements

Uzumaki builds on great work from:

• Deno for the JS/TS runtime (deno_core, deno_runtime)
• wgpu for the GPU backend
• Vello for rendering
• Parley for text layout
• Taffy for layout
• Blitz, where i learned how to drive the Linebender stack tysmm <333 and lovingly stole some ideas
• Zed, i borrowed a few utilities and they inspired me to start making ui frameworks a few years ago <3

License

Licensed under either MIT or Apache 2.0, at your option.