A blazing fast, framework-free platform hub for specialized micro-apps and developer tools. Built with pure Vanilla JavaScript, CSS variables, and Vite.
The app.ui.pe platform is designed to be as lightweight and SEO-friendly as possible. It utilizes a Multi-Page Application (MPA) architecture powered by Vite.
- Zero Heavy Dependencies: No React, Vue, Puppeteer, or JSDOM required.
- Perfect SEO: Each micro-app (e.g.,
/color-lab/) has its own physicalindex.htmlfile out of the box. This guarantees instant<head>parsing and 100/100 Lighthouse scores. - External Extensibility: Apps that require backends (e.g., Next.js hosted on
sql.ui.pe) can easily be linked in theapps-registry.jsusing theexternalUrlproperty, turning the Hub into a highly scalable directory. - Glassmorphic Design: An interactive, particle-powered space theme built entirely with CSS variables for seamless dark mode styling.
- Build Tool: Vite
- Languages: Vanilla JS (ES6 Modules), HTML5, CSS3
- Performance: Hardcoded
JSON-LDschemas, pre-renderedmetatags, accessibility-ready aria attributes. - Server: Uses
servefor production static hosting on platforms like Dokploy or Vercel.
├── color-lab/ # Example of an internal micro-app route
│ ├── index.html # Pre-rendered SEO HTML file for /color-lab/
│ └── color-lab-entry.js # Initialization script for the specific app
├── dist/ # Compiled static MPA outputs for production
├── scripts/ # Utility scripts
├── src/
│ ├── apps/ # Pure JS logic and CSS for individual tools
│ ├── components/ # Reusable Hub components (Navbar, App Card)
│ ├── hub/ # Landing page logic, Particle systems, and the App Registry
│ └── styles/ # Global design tokens, resets, and animations
├── index.html # The root landing page HTML (The Hub)
└── vite.config.js # Configured to build multiple HTML entries (MPA)
Make sure you have Node.js installed. We recommend Node v18+.
# Clone the repository
git clone https://github.com/The-UI-Lab/app.ui.pe.git
# Install dependencies
npm install# Spins up the Vite hot-reloading server
npm run devVisit http://localhost:3000 to see the hub. You can navigate directly to /color-lab/ to see the Multi-Page routing in action.
# Compiles the static /dist directory
npm run build
# Start a local preview of the production build
npm run previewAdding a new tool to the platform is simple:
- Create the App Logic: Go to
src/apps/_template/, copy it, rename it to your new app (e.g.,src/apps/json-explorer/), and write your Vanilla JS/CSS logic. - Create the HTML Route: Create a folder at the project root matching your URL path (e.g.,
mkdir json-explorer). Add anindex.htmlinside it. Usecolor-lab/index.htmlas a guide to hardcode the proper SEO<title>andog:tags. - Register the HTML File: Open
vite.config.jsand add your new HTML file to therollupOptions.inputlist so Vite bundles it automatically. - Register the App Card: Open
src/hub/apps-registry.jsand add your new app's info to theappsarray. Change itsstatusfromcoming-soontolive.
If you built an app using a framework like Next.js on a different domain (e.g., https://sql.ui.pe), you can easily add it to the directory:
- Open
src/hub/apps-registry.js. - Add the
externalUrl: 'https://sql.ui.pe'property to the object. - The platform card will natively render an
<a>tag redirecting users seamlessly!
Maintained by The UI Lab for the app.ui.pe ecosystem.