Start building from composable examples...
Learn how to use component-driven wiki to power knowledge sharing.
Create a scalable and consistent composable design system
Build a composable and cross application analytics
Build a component-driven data fetching
Build a basic component-driven React application
Welcome to the Bit documentation site! This site is a composition of independent components, built and maintained mainly by the Docs, Design and Community teams here at Bit! It was built from React, Markdown, and Node components we have crafted specifically for the purpose and needs of this app.
During this quick start, you will learn to create your own composable wiki app. We will show you how simple it is to build a complex app like a Wiki using components! We will use the components built for this documentation app in this example.
Bit is an open-source tool for composing component-driven software.
Bit stands at the intersection between product and engineering. It helps you take complex product requirements, and break them down into independent, and reusable pieces called "components". It allows you to create components and compose them with each other. Components are described by names and APIs, and contain source code implementation. They can be of different kinds like apps, pages, UI components, backend services and even content. You can think of almost anything in components.
Components can be as “big” as modern web applications, e-commerce shops, large building blocks like a Blog, a Wiki or a Hero. They can also be as “small” as simple UI components like Header, Footer or other useful design components. Every Bit Component, whether it is “big” or “small” is just a composition of others, where each is kept small and independently maintained.
Bit does not prescribe how to build your entire application. It helps you define and compose components and allows for every component to adopt the dev tools that best fit its nature. A React component is likely to be compiled, tested and perhaps even deployed using a composition of tools different than the one a backend-service component, or a generic function, may use. Bit offers native support for various dev tools like TypeScript, Babel, Jest, Webpack, ESLint and ready made development environments for React, NodeJS, Angular and more. New tools can be easily integrated by extending Bit with one more component.
People use Bit to create all kind of applications, from user interfaces with component-driven frameworks like React, Vue and Angular, to complex micro-service architectures, serverless functions, CLI utilities, desktop applications, native mobile applications and even IoT. You can do with Bit about anything you can do with JS and even beyond.
Bit was built with TypeScript and supports it natively. It was designed to be language-agnostic, and will support other software languages in the future! For now, our development environments use TypeScript as the default compiler for JS and TS components. You can easily switch to Babel or any other compiler. Bit is completely agnostic to your tech stack.
To get started, install Bit on your machine:
For a more advanced installation guide, head to our installation section.
Initialize a workspace to start your journey into component-driven development. A workspace is a group of files and directories that provide the necessary context for components to be authored, composed, maintained, and collaborated on.
Open your workspace directory:
Your workspace maintains a number of components. One of these components is also an app.
Run the following to run the app component:
A Bit component is a reusable, independently source-controlled module, that is stored in scopes and maintained in workspaces. Bit components enable a new software development strategy that can be used to complement monorepos and poly-repos, or replace them, altogether.
Run the Workspace UI to preview your components:
Run the following to verify there are no issues preventing Bit from snapping each component, independently:
The output should confirm all components are
ok to be snapped. The components' status is currently
new as they were forked by the workspace starter and not imported.
More on this in the Import a component section.
The snapping process creates an immutable snapshot of the components' latest changes. The component's 'scope' property is part of these changes. Follow the next section to create your own scope and set your components, accordingly.
A scope is a collaboration server for components. It lets you export components from your workspace, store them remotely, and collaborate on them with others. Developers with access to your scope can use your components or suggest changes.
Scopes help organize components in a shared domain of responsibility. For example, the analytics scope includes all components that provide analytics services, and the design scope includes the services for our design language.
Create your free bit.cloud accountCreate your account
Run the following to log in to your bit.cloud account:
Set the components in your workspace with your newly created remote scope (replace 'my-org' with your username or organization name. For example,
Run the following to link to components (with their newly renamed scopes) from the
Run the following to compile all components:
Run the following to record your component changes and tag them with a semantic release version:
Export your staged components from your workspace to their remote scopes. This will make them available to be consumed by components outside of your workspace, as well as by traditional monolithic projects. More importantly, this will enable you to collaborate on individual components, independently.
Use 'lanes' to collaborate on groups of components without interfering with the main development course. To learn more, see Lanes overview.
- Read Thinking in Components
- Dive deeper into any of the topics.