Introduction
Build, Deploy, and Scale Micro Frontends with Independent Teams
OpenComponents is a powerful, language-agnostic micro frontend framework that enables teams to develop, test, and deploy UI components independently while composing them into cohesive applications.
Break free from monolithic frontends.
Quick Start
Core Concepts
🧩 Components
Small units of isomorphic code consisting of HTML, JavaScript, and CSS. Components can include server-side logic for data fetching and model composition, rendering to pure HTML for injection into any page.
🌐 Registry
A REST API that handles component consumption, retrieval, and publishing. The registry manages immutable, versioned components and serves as the central contract between producers and consumers.
📦 Library & CDN
Centralized storage for published components with automatic CDN distribution for static assets (images, CSS, JavaScript). Ensures fast, global delivery of component resources.
🛠️ CLI Tools
Powerful command-line interface for creating, developing, testing, and publishing components. Includes local development server with hot reloading and component preview capabilities.
Why Choose OpenComponents?
✅ Perfect For:
- Mixed technology organizations- .NET, Java, PHP backends with JavaScript frontends
- Large-scale applications- Multiple teams, complex deployment requirements
- SEO-critical applications- E-commerce, content sites, marketing pages
- Gradual modernization- Migrating from legacy systems without big-bang rewrites
- Multi-brand platforms- Shared components across different properties
- Performance-critical applications- Need for server-side rendering and CDN optimization
❌ Not Ideal For:
- Highly coupled monoliths- Projects that require tight integration and single-stack deployments
- Single-team, small projects- Simpler architectures may be more efficient
Components management
A component is a directory composed by
| File | Description |
|---|---|
package | The component definition, dependencies, and more. |
view | The view in charge to output the final markup. OC uses ES6 templates by default and comes with a powerful template system to support components built with any javascript UI framework like React, SolidJS, Vue. Legacy Handlebars and Jade templates are still supported for backwards compatibility. |
server (optional) | If the component need logic, including consuming services, this is the entity that will produce the view-model to compile the view. |
| static assets (optional) | Images, Javascript, and files to be uploaded to the CDN and referenced in the HTML markup. |
| * | Any other files that will be useful for the development such as tests, docs, etc. |
After publishing, components are immutable and semantic versioned.
Getting started with components
Creation
To create a folder containing the component:
npm install oc -g
oc init hello-world
Editing, debugging, testing
To start a local test registry using a components' folder as a library with a watcher:
oc dev . 3030
To see how the component looks like when consuming it:
oc preview http://localhost:3030/hello-world
As soon as you make changes on the component, you will be able to refresh this page and see how it looks.
Publishing to a registry
You will need an online registry connected to a library. A component with the same name and version cannot already exist on that registry.
# you have to do the registry config first, just once
oc registry add http://my-components-registry.mydomain.com
# then, ship it
oc publish hello-world/
Now, it should be available at http://my-components-registry.mydomain.com/hello-world.
Consuming Components
From a consumer's perspective, a component is an HTML fragment. You can render components client-side, server-side, or fall back to client-side rendering when server-side rendering fails (for example, if the registry is slow or unavailable).
You don't need Node.js to consume components on the server-side. The registry can provide you rendered components so that you can consume them using any tech stack.
When published, components are immutable and semantic versioned. The registry allows consumers to get any version of the component: the latest patch, or minor version, etc.
When to use OpenComponents:
- Building micro frontends with multiple teams
- Need for independent deployment of UI components
- Sharing components across different applications
- Gradual migration from monolithic frontends
Client-side rendering
To make this happen, your components registry has to be publicly available. This is all you need:
<html>
<head></head>
<body>
<oc-component
href="http://my-components-registry.mydomain.com/hello-world/1.X.X"
></oc-component>
<script src="http://my-components-registry.mydomain.com/oc-client/client.js"></script>
</body>
</html>
For more information about client-side operations, look at this page.
Server-side rendering
You can get rendered components via the registry rest api.
curl http://my-components-registry.mydomain.com/hello-world
{
"href": "https://my-components-registry.mydomain.com/hello-world",
"version": "1.0.0",
"requestVersion": "",
"html": "<oc-component href=\"https://my-components-registry.mydomain.com/hello-world\" data-hash=\"cad2a9671257d5033d2abfd739b1660993021d02\" id=\"2890594349\" data-rendered=\"true\" data-version=\"1.0.13\">Hello John doe!</oc-component>",
"type": "oc-component",
"renderMode": "rendered"
}
Nevertheless, for improving caching and response size, when using the node.js client or any language capable of executing server-side javascript the request will look more like:
curl http://my-components-registry.mydomain.com/hello-world/~1.0.0 -H Accept:application/vnd.oc.unrendered+json
{
"href": "https://my-components-registry.mydomain.com/hello-world/~1.0.0",
"version": "1.0.0",
"requestVersion": "~1.0.0",
"data": {
"name": "John doe"
},
"template": {
"src": "https://s3.amazonaws.com/your-s3-bucket/components/hello-world/1.0.0/template.js",
"type": "es6",
"key": "cad2a9671257d5033d2abfd739b1660993021d02"
},
"type": "oc-component",
"renderMode": "unrendered"
}
In this case you get the compiled view + the data, and you can do the rendering, eventually, interpolating the view-model data and rendering the compiled view with it.
When retrieving multiple components, a batch POST endpoint allows to make a single request to the API.
- Javascript browser client
- Javascript Node.js client
- PHP client
- Ruby client
- Rails client
- Sinatra client
Install the CLI
See the dedicated CLI guide for installation, shell-autocomplete, and update instructions.
Setup a library
See detailed guides for:
Setup a registry
A full configuration reference and production-ready examples live in Registry Configuration. Start there when you need to spin up your first registry.