CotomyElement
DOM-oriented UI wrapper that provides structural control over elements instead of component abstraction.
DOM-first UI runtime
Cotomy
DOM-first UI runtime for internal business systems.
A TypeScript-first runtime for screen-oriented UI, form workflows, and page lifecycle control.
Install from npm
npm i cotomy
Install from npm and continue with the Getting Started guide.
Problem
The Problem with Typical Web UI Architectures
Typical web UI frameworks, especially SPA frameworks, tend to build the entire application as a single runtime.
In internal business systems, work is usually organized around individual screens with their own business context.
Form handling, retained state, and the meaning of user actions are often managed at the screen level rather than at the application shell level.
When too much screen logic is concentrated within a single SPA runtime, state management, navigation, UI responsibilities, and workflow coordination tend to become tightly coupled.
- Long-running operational screens
- Form state that spans multiple requests
- DOM stability as an operational requirement
- UI actions that directly represent business intent
As the application grows, a single runtime can accumulate more and more cross-screen responsibilities in the same place.
Solution
Cotomy's Approach
Cotomy keeps the DOM as the primary UI model and adds explicit runtime structure around forms, screen boundaries, and page-level lifecycle.
Instead of organizing UI around a component tree, Cotomy organizes it around screen-oriented UI, form workflows, and page lifecycle control.
Core ideas
- DOM-first UI model
- Screen-oriented UI boundaries
- Form workflows as runtime structure
- Page lifecycle and event cleanup
Components
Core Runtime Components
Cotomy is composed of several runtime primitives.
CotomyForm
A unified runtime abstraction for form submission and state handling.
CotomyApi
A standardized API interaction layer that aligns UI actions with backend protocols.
CotomyPageController
Coordinates screen lifecycle, initialization, and UI behavior.
Use Cases
Where Cotomy Fits
Cotomy is designed for internal business applications, especially systems that remain open for long sessions, such as
- line-of-business systems
- operational dashboards
- CRUD-heavy back-office tools
- screen-oriented administrative interfaces
Example
CotomyElement Example
The following example illustrates how Cotomy structures UI behavior around DOM boundaries.
CotomyElement represents a stable DOM boundary that encapsulates interaction logic and styling.
CotomyElement.first("header")!.append(new CotomyElement({
html: /* html */`<div class="message" data-kind="info">Ready to build.</div>`,
css: /* css */`
[root] {
display: grid;
gap: 6px;
padding: 8px 12px;
background: #f6f7f8;
border: 1px solid #d9dee3;
border-radius: 6px;
}
`
}));
Project Templates
Cotomy Razor Pages Templates
Project templates that give you a ready-to-go Razor Pages + TypeScript foundation. Available in two plans: Standard for UI-only projects, and Professional with authentication, CRUD, and EF Core included.
Standard — $39
UI Framework (Form / Dialog / SidePanel) + TypeScript integration + authentication hook. Best for projects that add UI to an existing backend, or when you want to design your own auth layer.
Professional — $89
Everything in Standard, plus Cookie authentication, CRUD templates (Product / Order / User), EF Core, and SQL Server. Start with a production-ready structure for business applications.
Resources