Whether building simple pages, creating interactive applications, or constructing complex systems, ofa.js can handle it with ease.
No matter the application scenario, ofa.js is suitable.
I'm too old to learn, I don't want to read your docs, can it be used? 
I want to temporarily add a feature to an old project 
I'm a beginner developer, Node.js and npm turned me away 
Developing a huge shopping mall system, can you support it? 
I'm a backend developer, I just want to use a backend template engine to develop, is ofa.js suitable? I'm too old to learn, I don't want to read your docs, can it be used? No need to learn ofa.js first, you can directly reuse components built on it.
After the open-source component author finishes writing the code, others just need to copy a few lines from the example and instantly bring the functionality into their own project.
I want to temporarily add a feature to an old project Simply introduce ofa.js into your existing project via a script tag, and it's ready to use immediately.
After introducing it, a variety of components are readily available.
I'm a beginner developer, Node.js and npm turned me away ofa.js is very beginner-friendly; you don't need to learn tools like Node.js or npm.
You only need a browser and any static server to start developing.
If you use Chrome, open OFA Studio this online tool, and you won't need to prepare a static server; just start.
Tutorial: Create your first app Developing a huge shopping mall system, can you support it? ofa.js is very suitable for large projects because it adopts a micro-frontend architecture pattern.
You can break down the mall system into sufficiently granular requirements, develop components one by one, put them in separate folders, and preview component effects directly through a static server.
Finally, assemble them into a huge system. ofa.js 's micro-frontend pattern is exactly the remedy for monolithic applications.
For reference, check out the case NoneOS, an operating system developed with ofa.js, which is very large in scale.
I'm a backend developer, I just want to use a backend template engine to develop, is ofa.js suitable? ofa.js's SSR does not need to be bound to Node.js. As long as you follow the SCSR rules, you can use any backend language for template engine development.
For details, refer to ofa.js SSR
Skip the compilation process and run the code directly.
Using components developed with ofa.js requires no concerns about dependencies or configuration
No More Overtime
Let me off work
Leave work later
Weekend overtime
In the past, you had to go through a series of learning steps like Node.js ➡️ npm ➡️ Webpack before you could take the first step of packaging a component.
Now, you only need one file.
You can use ofa.js on any platform that supports Web Components
All components of the current website can be used, viewed, and referenced independently without relying on a specific environment, truly ready to use out of the box.
Shock animation logo component, plays a splash animation effect on click
Chat bubble component for displaying chat messages, supports custom avatars and content
Hello, this is a chat bubble example Anchor dialog component, displays a dialog with custom content when clicking a specific element
This is a simple anchor dialog demonstration
Flowchart component for displaying process nodes and connection relationships
A component that renders and views Markdown with a single line of code; the current click-to-view-documentation feature is also implemented based on it.
Interactive code preview component, supports multi-file editing, real-time preview, etc.
Hello o-playground
This is an interactive code editor
h3 { color: #42b983; }
Supports template syntax and direct node manipulation—flexible and efficient
API design mirrors jQuery, yet more intuitive
// jQuery Code
$("#target").html("some html code"); // set html
$("#target").text("set text"); // set text
var ele_text = $("#target").text(); // get text
var parents = $("#target").parents(); // get array of all parents
var child = $("#target").children()[0]; // get first child element
// ofa.js Code
$("#target").html = "some html code"; // set html
$("#target").text = "set text"; // set text
var ele_text = $("#target").text; // get text
var parents = $("#target").parents; // get array of all parents
var child = $("#target")[0]; // get first child element