Why OpenComponents?

Scale your frontend development by enabling multiple teams to work independently on different parts of your application. Each team can own their components end-to-end - from development to deployment.

Avoid the monolith trap. As applications grow, frontend codebases become difficult to maintain and deploy. OpenComponents lets you break your UI into independently deployable pieces that can be composed at runtime.

Technology freedom. Teams can choose their preferred frontend stack (React, Vue, vanilla JS) while still contributing to the same application. No more framework lock-in or migration headaches.

Perfect for:

Growing engineering teams that need to work independently
Large applications with multiple feature areas
Organizations wanting to avoid frontend monoliths
Teams using different frontend technologies

Components

Independent, reusable UI pieces that teams can develop and deploy separately. Components are self-contained with their own HTML, CSS, and JavaScript, making them easy to maintain and update without affecting other parts of your application.

Learn more

Template system

Use any frontend technology - React, Vue, SolidJS, or vanilla JavaScript. The template system handles the complexity of supporting multiple frameworks, so teams can choose the best tool for their needs without being locked into a single technology stack.

Learn more

Registry

Centralized component distribution with built-in versioning and CDN capabilities. The registry provides REST APIs for consuming and publishing components, with automatic static asset management for images, CSS, and other resources.

Learn more

CLI

The CLI tool allows developers to create, develop, and test components locally.

It also allows publishing of components to your registry.

Learn more

Client libraries

Multiple libraries are available, allowing clients to consume components on different environments and platforms. Depending on the library, clients are normally able to consume both unrendered components and rendered components.

Learn more

Open-source

OpenComponents is an open-source, "batteries included" micro frontends framework. Born at OpenTable in 2014, it matured over the years into a battle tested solution currently used to deliver micro frontends at scale by fast growing companies around the world.

Get started with OpenComponents

Before starting make sure you have:

A cloud storage solution such as:
A Node.js hosting platform (Vercel, Netlify, Railway, DigitalOcean, AWS, Azure, Google Cloud, or any VPS)

#1 - Deploy the registry

Deploy your OpenComponents registry to any Node.js hosting platform. You can use the starter kit as a foundation and deploy it to platforms like Vercel, Netlify, Railway, or any cloud provider that supports Node.js applications.

#2 - Build your first component

Install the OpenComponents CLI

$ npm install -g oc

Create your first component

$ oc init my-first-component

Develop/test locally by starting a local dev registry

$ oc dev . 3030

Your component will be available at:

endpoint: http://localhost:3030/my-first-component
info: http://localhost:3030/my-first-component/~info
preview: http://localhost:3030/my-first-component/~preview

#3 Publish the component to the registry

Add the registry using the CLI

$ oc registry add https://your-registry-domain.com/

Publish your component

$ oc publish my-first-component --username=YOURVALUEHERE --password=YOURVALUEHERE

Your component is now published: https://your-registry-domain.com/my-first-component

Who's using OC?

OC is used by fast growing companies around the world to serve microfrontends at scale