ofa.js: a front-end framework with no build step

A framework for people who already know HTML and CSS

ofa.js is a web frontend framework designed for building web applications, with the stated aim of improving development efficiency and lowering the development threshold. The target audience is spelled out in a single line: if you are already familiar with HTML, CSS and JavaScript, then ofa.js is an excellent choice.

The position it takes is unusual for a framework. It can be used as a library in the way jQuery is used, and it can also be used to build large applications in the way React, Vue and Angular are used. And the claim in the readme is that this removes the need for tools such as npm, Node.js and webpack, which the readme describes as unrelated to interface development.

That is a strong claim, and the two halves of it are worth separating. A framework that runs in the browser without a bundler is entirely feasible, because the browser understands ES modules and understands the DOM. What you give up is not the ability to write an application, it is the layer where a compiler, a type checker, a bundler and a test runner meet. The readme is aware of this, and frames the result as an advantage for a particular kind of project rather than as a universal win.

The homepage is ofajs.com, and the documentation is published in eight languages, with English, Chinese, Traditional Chinese, Spanish, Japanese, Korean, French and German versions linked from the top of the readme.

One script tag is the whole installation

Adding ofa.js to a page is a script reference, and there is no build step before it and no configuration after it:

<script src="https://cdn.jsdelivr.net/gh/ofajs/ofa.js/dist/ofa.min.mjs" type="module"></script>

The file is served from a CDN path that points at the dist directory of the repository itself, which is worth noting. The published artefact is in the repository rather than on a package registry, so the version you get is tied to a commit rather than to a release, and the readme does not ask you to pin one.

The same file can also be pulled in as an ES module:

import 'https://cdn.jsdelivr.net/gh/ofajs/ofa.js/dist/ofa.min.mjs';

Debugging has its own switch, and it is a neat piece of design. Adding a #debug parameter to the reference URL turns on the source map feature for component templates, so the browser can show the original source rather than the transformed one:

<script src="https://cdn.jsdelivr.net/gh/ofajs/ofa.js/dist/ofa.min.mjs#debug" type="module"></script>

The other half of the zero-setup story is the tooling. The readme describes opening the official build tool in the browser, selecting a local directory and starting to develop, with all computation, data and storage performed locally and no reliance on cloud services. The emphasis on local storage is a deliberate answer to hosted development environments.

A component is an HTML file that other pages point at

The core of the framework is a simplified take on Web Components, and the readme explains why it exists.

The argument runs like this. Traditional Web Component encapsulation requires a large amount of knowledge, which has led to the relatively slow development of Web Components, and the Web Components v1 standard, supported since 2018, still has not been widely adopted. With ofa.js, a component is created by creating an HTML file, and other pages can reference it through a simple tag with no pre-compilation process, which reduces the learning curve and lets you focus on the application requirements.

The component file is an ordinary HTML file with a template element marked as a component, a style block scoped to the host, and a script that exports a default function returning the tag and the data:

    <script>
      export default async () => {
        return {
          tag: "my-component",
          data: {
            title: "Hello Component",
          },
        };
      };
    </script>

The template carries the markup with an interpolation, {{title}}, bound to the data object.

Using it takes two lines in the consuming page, one tag that loads the component file and one that uses it:

<script src="https://cdn.jsdelivr.net/gh/ofajs/ofa.js/dist/ofa.min.mjs" type="module"></script>
<l-m src="./my-component.html"></l-m>
<my-component></my-component>

The readme also notes that ofa.js adds template syntax sugar similar to that of Angular and Vue, so the interpolation and the reactive data are familiar to anyone who has used those. The overall model is described in the repository description as an MVVM framework, and the keywords list data sharing and static client rendering alongside micro frontends.

The micro-frontend argument starts from the monolithic problem

The long section on why the project exists is the most interesting writing in the readme, and it is an argument about build tools rather than about components.

The original intention was to solve the engineering problems of web development without relying on compilation tools, with engineering defined in the readme as the systematic integration of specifications, processes, tools and methods.

The argument then runs in three steps. Over the past decade web front-end development moved from wild growth to gradual engineering, borrowing from traditional application development by introducing Node.js and compilation workflows to solve engineering challenges in large projects. When projects became large, the drawbacks of that model appeared, in the form of the monolithic application problem, where all functional modules sit in one codebase and changing one part affects everything. And then, for large projects, the answer is to decompose into micro-frontends the way microservices decompose a backend.

Except, the readme argues, compilation makes micro-frontends difficult and cumbersome, because independent deployment of a front-end module requires compiling that module, which is very difficult, and that is why front-end development nearly stagnated.

The conclusion is the one that justifies the framework. Traditional programming languages need to compile to target different hardware and operating systems, but web development is different, because it is based on browsers and originally does not need compilation, can run and deploy independently, and is naturally in a micro-frontend mode.

The AI angle and the skills files are a consequence of that design

Two of the claimed advantages are about AI, and they follow directly from the no-compilation decision rather than being bolted on.

The first is that there are no compilation black boxes, so AI generated code can be deployed and self validated quickly, and by eliminating intermediate layers and compilation processes the code becomes easier to debug and fix. The logic is sound: an agent that writes a template that is then transformed by a build step has to reason about a pipeline, while an agent that writes a file which the browser loads directly has to reason about one artefact.

The second is a set of files published for AI tools. For search engines and online AI indexing there is a SKILL.md file in a skills directory of the repository, and for AI tools that support skills there is a zip archive of the same documentation:

https://raw.githubusercontent.com/ofajs/ofa.js/main/skills/ofajs-docs/SKILL.md

and

https://raw.githubusercontent.com/ofajs/ofa.js/main/skills/ofajs-docs.zip

So a tool that can load a skill can be taught the framework from the project's own documentation, which is a smaller and more reliable thing to hand a model than a wiki page with prose. The repository contains a skills directory and a skills-helper directory with a script for resetting the full coverage of that documentation, so the skills are maintained rather than written once.

The readme also points at a cases page on the documentation site for the usage experience, which is where the argument above is meant to be checked against real applications.

The framework says no Node, and its own repository uses it

The repository is a good place to see the difference between the framework and the tooling that ships it.

The package is ofa.js at version 4.7.7, published as an MIT licensed project, and the description in the manifest says it is a pure web front-end componentized framework that does not require the use of nodejs. The exports map points at a CommonJS build and an ES module build, and the main field points at the unminified bundle.

And yet the build is Rollup, with the build script running rollup -c, and the development dependencies include Rollup with the terser plugin, Playwright for the browser tests, jasmine-core, koa and koa-static with the open package for a local static server, and shelljs. The runtime dependencies are just two, drill.js and xhear, which are the author's own micro-frontend and data sharing libraries. The repository also carries a playwright config, a rollup config, a scripts directory, a test directory, a tutorial directory and a dist directory.

So the users of the framework need no toolchain, and the maintainers of the framework need a considerable one. That is not a contradiction, it is the usual division of labour in a distributed ecosystem, and it is the reason the browser based development tool exists at all: the person writing the interface is not the person running the build.

The release history shows a project shipping weekly. Version 4.7.5 was published on 2026-09-12, 4.7.6 on 2026-10-08 and 4.7.7 on 2026-10-09, the last push was on 2026-10-18, and the manifest records a start year of 2018.

Editorial conclusion

ofa.js fits a developer who wants to build a front end by editing HTML files in a browser, or who wants a micro-frontend split without a per-module build pipeline, because each component is a plain file that a tag can point at and the framework does the rest at runtime. It is the wrong choice for a team that wants type checking, bundling and a test gate before deploy, since the project explicitly removes the compilation layer that would give you those, and it is the wrong choice for a large team with an existing build pipeline, because you would be replacing a solved problem with a runtime cost. Before you commit, read the case studies on the documentation site, and be honest about who maintains the project, since the releases arrive weekly but the codebase is one author's and the licence is MIT with no vendor behind it.

Frequently asked questions

Official sources

1. License: MIT
2. ofajs/ofa.js on GitHub
3. Project website
4. README
5. Releases