{"id":15531,"library":"axiom-framework","title":"Axiom Framework","description":"Axiom is a modern web framework featuring a unique two-phase rendering architecture, emphasizing high performance through in-memory calculations and zero direct DOM reads. It leverages a reactive programming model, likely based on signals, to manage UI updates efficiently. Currently at version 0.9.1, the framework appears to be under rapid development, with frequent releases focusing on new features like declarative routing, server-side rendering (`renderToString`), portals, reactive context, and form modules, as well as bug fixes and performance improvements. Its core differentiators include its rendering strategy, aiming to eliminate DOM reads for re-renders, and its TypeScript-first approach, providing strong type safety for developers.","status":"active","version":"0.9.1","language":"javascript","source_language":"en","source_url":"https://github.com/naml14/axiom-framework","tags":["javascript","framework","signals","reactive","layout","performance","dom","two-phase rendering","masonry","typescript"],"install":[{"cmd":"npm install axiom-framework","lang":"bash","label":"npm"},{"cmd":"yarn add axiom-framework","lang":"bash","label":"yarn"},{"cmd":"pnpm add axiom-framework","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Axiom is designed for modern ES Modules environments and ships with TypeScript types. CommonJS `require` syntax is not supported.","wrong":"const App = require('axiom-framework')","symbol":"App","correct":"import { App } from 'axiom-framework'"},{"note":"The core rendering function is a named export, not a default export.","wrong":"import render from 'axiom-framework'","symbol":"render","correct":"import { render } from 'axiom-framework'"},{"note":"Reactive primitives like `signal` are typically lowercase named exports. If types are needed, use `typeof signal` or `ReturnType<typeof signal>`.","wrong":"import { Signal } from 'axiom-framework'","symbol":"signal","correct":"import { signal } from 'axiom-framework'"},{"note":"The `createPortal` function allows rendering components outside the main component tree, similar to React Portals.","symbol":"createPortal","correct":"import { createPortal } from 'axiom-framework'"},{"note":"For server-side rendering (SSR), `renderToString` is the entry point, available since v0.2.6.","symbol":"renderToString","correct":"import { renderToString } from 'axiom-framework'"}],"quickstart":{"code":"import { App, render, signal } from 'axiom-framework';\n\ninterface CounterProps {\n  initialCount: number;\n}\n\nfunction Counter({ initialCount }: CounterProps) {\n  const count = signal(initialCount);\n\n  const increment = () => {\n    count.value++;\n  };\n\n  const decrement = () => {\n    count.value--;\n  };\n\n  return App`\n    <div>\n      <h1>Count: ${count}</h1>\n      <button onclick=${increment}>Increment</button>\n      <button onclick=${decrement}>Decrement</button>\n    </div>\n  `;\n}\n\n// Render the Counter component into the DOM\nrender(document.getElementById('app')!, Counter, { initialCount: 0 });\n\n// Example of accessing a signal's value later\n// setTimeout(() => console.log('Current count:', count.value), 2000);","lang":"typescript","description":"Demonstrates creating a basic reactive counter component using Axiom's `App` and `signal` primitives, then rendering it to the DOM."},"warnings":[{"fix":"Refer to the GitHub repository's change log for specific API changes. Pin exact versions in your `package.json` (e.g., `\"axiom-framework\": \"0.9.1\"`) to prevent unexpected breakage.","message":"Axiom Framework is in active, rapid development (currently <1.0.0), implying that APIs might change frequently between minor and even patch versions. Developers should pin exact versions and carefully review release notes for updates.","severity":"gotcha","affected_versions":">=0.2.0"},{"fix":"Thoroughly test existing applications when upgrading to v0.9.0 and later. Consult the GitHub issue tracker or discussions for details on the v1 stability contract.","message":"Version 0.9.0 introduced 'v1 stability contract validation'. While not explicitly marked as a breaking change, this suggests internal API shifts or stricter adherence, which could inadvertently affect code relying on undocumented or previous internal behaviors.","severity":"breaking","affected_versions":">=0.9.0"},{"fix":"Always use Axiom's provided APIs (signals, components, effects) to manage UI state and updates. Avoid direct `document.querySelector` or manual DOM mutations on elements managed by Axiom.","message":"Axiom emphasizes a 'zero DOM reads' approach for re-renders. Directly manipulating the DOM outside of Axiom's reactive system can lead to unexpected behavior, desynchronization, or performance issues.","severity":"gotcha","affected_versions":"*"},{"fix":"Ensure your development and deployment environments meet the specified engine requirements. Use a modern build toolchain that supports ES Modules.","message":"The framework targets modern JavaScript environments, specifically requiring Node.js >=22.0.0 or Bun >=1.0.0. Older Node.js versions or non-ESM environments are not supported.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Ensure `App` is used with backticks for JSX-like syntax: `App`...``.","cause":"Attempting to use `App` as a function or class constructor instead of a tagged template literal.","error":"TypeError: App is not a function"},{"fix":"Use ESM `import` statements: `import { App, render } from 'axiom-framework';`. Ensure your `package.json` has `\"type\": \"module\"` if running in Node.js.","cause":"Trying to import Axiom components using CommonJS `require()` syntax in an ES Module environment or vice-versa.","error":"ReferenceError: require is not defined"},{"fix":"Use the lowercase `signal` for the reactive primitive: `import { signal } from 'axiom-framework';`. If you need the type, it's typically inferred or accessed via `typeof`.","cause":"Incorrectly trying to import a type or a primitive with a capitalized name that is not exported.","error":"TS2305: Module 'axiom-framework' has no exported member 'Signal'."},{"fix":"Ensure your server-side rendering logic and client-side application logic are deterministic and produce identical initial HTML structures. Avoid client-only code that alters the initial render.","cause":"When using `renderToString` (SSR), the HTML generated on the server does not exactly match the initial render of the client-side application.","error":"Error: Hydration mismatch: Server and client DOM differ."}],"ecosystem":"npm"}