Loading repository data…
trycatch-labs / repository
The lightweight and powerful UI rendering engine without dependencies and written in TypeScript💫 (Browser, Node.js, Android, iOS, Windows, Linux, macOS)
A transparent discovery signal based on current public GitHub metadata.
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
The lightweight and powerful UI rendering engine without dependencies and written in TypeScript (Browser, Node.js, Android, iOS, Windows, Linux, macOS)
const Greeting = component(({ name }) => <h1>Hello {name} 🥰</h1>);
<Greeting name='Alice' />
from template:
npx degit github:trycatch-labs/dark/templates/browser app
cd app
npm i
npm start
This project was written in my free time as a hobby. I challenged myself: can I write something similar to React without third-party dependencies and alone. The biggest discovery for me: writing a rendering library is not difficult, it is difficult to write one that is fast and consumes little memory. And this is a really hard task.
If you liked the project, please rate it with a star ⭐, it gives me inspiration to work for the benefit of the open-source community.
| Package | Description | URL |
|---|---|---|
@dark-engine/core | Abstract core with main functionality | Link |
@dark-engine/platform-browser | Renderer for browser (Single-Page apps) | Link |
@dark-engine/platform-server | Renderer for Node.js (Multi-Page, Static-Gen and Universal apps) | Link |
@dark-engine/platform-native | Renderer for Android, iOS (Native mobile apps) | Link |
@dark-engine/platform-desktop | Renderer for Windows, Linux, macOS (Native desktop apps) | Link |
@dark-engine/web-router | Isomorphic router for browser and server | Link |
@dark-engine/native-navigation | Dark NativeScript router | Link |
@dark-engine/animations | Spring based animations | Link |
@dark-engine/styled | Styled components | Link |
@dark-engine/data | Declarative queries and mutations | Link |
@dark-engine/signals |
import { component, useState } from '@dark-engine/core';
import { createRoot } from '@dark-engine/platform-browser';
const App = component(() => {
const [name, setName] = useState('Dark');
return (
<>
<div>Hello {name}</div>
<input value={name} onInput={e => setName(e.target.value)} />
</>
);
});
createRoot(document.getElementById('root')).render(<App />);
without JSX:
import { Text, component, useState } from '@dark-engine/core';
import { createRoot, div, input } from '@dark-engine/platform-browser';
const App = component(() => {
const [name, setName] = useState('Dark');
return [
div({ slot: Text(`Hello ${name}`) }),
input({ value: name, onInput: e => setName(e.target.value) }),
];
});
createRoot(document.getElementById('root')).render(App());
Based on the benchmark results, Dark is approximately 28% slower than the reference vanillajs-lite implementation, yet it outperforms Angular, React and Preact.
A small application demonstrating the capabilities of Dark using SSR, rendering to stream, service-worker, offline mode, concurrent rendering, caching, suspense, router, async queries, lazy and styled components scores maximum points in Lighthouse.
Dark can split large rendering tasks automatically.
MIT © Alex Plex
Selected from shared topics, language and repository description—not editorial ratings.
debasish1996 /
Lightweight, accessible Angular component library — barebone structure and behaviour with zero design opinions. Bring your own styles or use the optional theme package.
59/100 healthSyncfusionExamples /
Syncfusion Angular4 UI Components is a collection of modern TypeScript based true Angular Components. It has support for Ahead Of Time (AOT) compilation and Tree-Shaking. All the components are developed from the ground up to be lightweight, responsive, modular and touch friendly.
8/100 health| Signals, computed signals and signal effects |
| Link |