Skip to main content
GlyphUI is currently available as a local build. There is no npm package yet, so you’ll need to clone the repository and build it yourself.

​
Prerequisites

Make sure you have the following installed:
  • Node.js (v14 or higher)
  • npm (comes with Node.js)
  • Git

​
Installation Steps

1

Clone the repository

Clone the GlyphUI repository to your local machine:
git clone https://github.com/x0bd/glyph-ui.git
cd glyph-ui
2

Install dependencies

Install all dependencies from the project root:
npm install
This installs dependencies for the root workspace and all packages, including the runtime package.
3

Build the runtime

Navigate to the runtime package and build it:
cd packages/runtime
npm run build
This creates the compiled framework file at packages/runtime/dist/glyphui.js.
4

Verify installation

You can verify the build was successful by checking for the output file:
ls packages/runtime/dist/glyphui.js
If the file exists, you’re ready to start building with GlyphUI!

​
Project Structure

After installation, your project structure will look like this: 
glyphui/
├── examples/               # Example applications
│   ├── counter/
│   ├── hello-world/
│   ├── lazy-loading/
│   ├── vercel-todo/
│   └── ...
├── packages/
│   └── runtime/            # Core framework code
│       ├── src/            # Source files
│       └── dist/           # Built distribution (glyphui.js)
├── package.json            # Root workspace configuration
└── README.md

​
Using GlyphUI in Your Project

Once built, you can import GlyphUI functions and classes in your JavaScript files: 
import {
  Component,
  h,
  hFragment,
  mount,
  lazy,
  Suspense,
  createStore,
  connect,
} from "./packages/runtime/dist/glyphui.js";
The import path is relative to your project root. Adjust it based on where your files are located relative to the GlyphUI installation.

​
Running Examples

To explore the included examples:
1

Start the development server

From the project root, run:
npm run serve:examples
Or use http-server directly:
npx http-server . -c-1
2

Open examples in browser

Navigate to the examples in your browser:
  • Counter: http://localhost:8080/examples/counter/counter.html
  • Hello World: http://localhost:8080/examples/hello-world/hello.html
  • Todo App: http://localhost:8080/examples/vercel-todo/index.html
Or browse all examples at: http://localhost:8080/examples/

​
Development Workflow

When developing with GlyphUI:
  1. Make changes to the runtime source in packages/runtime/src/
  2. Rebuild the framework: cd packages/runtime && npm run build
  3. Refresh your browser to see changes
Remember to rebuild the runtime after making any changes to the framework source code. Changes won’t be reflected until you run npm run build in the runtime package.

​
Next Steps

Quickstart

Build your first GlyphUI app in minutes

Core Concepts

Learn the fundamentals of GlyphUI

Build docs developers (and LLMs) love

Get started for freeTalk to us