What is Component IO?

Building blocks that will make your web development simpler.

Component IO lets you add content and functionality to your website and make live changes with an online dashboard. You can edit your content and the underlying code for any component on your site without having to change or redeploy your website’s code. This workflow is simple & robust, and it makes managing your website easier.

Component IO also has a library of ready-to-use website components that you can copy into your project with one click and customize to your needs. If you want even more customization, you can build components entirely from scratch and still manage them online.

Tools for technical and non-technical users.

For non-technical users, Component IO has a simple WYSIWYG (what-you-see-is-what-you-get) editor for making changes to text, images, colors, order, and more. No coding skills are needed to use the content editor, and a live preview gives instant feedback.

For technical users, Component IO is simple to set up and has a well-documented API for building and customizing component HTML, CSS, and JavaScript, as well as for binding data, triggering events, rendering content, and more.

Works with every platform & technology.

Component IO was built with other libraries and existing projects in mind, from traditional CMS systems like WordPress to modern frontend libraries like React. That means Component IO is easy to set up on any platform and is also perfectly capable of powering sophisticated Single-Page Applications.

If you are an experienced developer and want to know how Component IO works with other frontend libraries & frameworks, you can jump to the following:
AngularJS 1 - Angular 2+ - React - Vue.js - Bootstrap - JSON (data only)

Getting Started

The official guide assumes basic knowledge of HTML. If you are totally new to web development, you may want to try getting a simple web page working first. Once you have a web page, you’re ready to use Component IO.

The easiest way to try Component IO is by example. If you want to try a component in your own project, you can simply create an .html file and paste the following code:

<component key=dkaal></component>
<!-- Component IO script -->
<script project="component-io-team" src="https://cdn.component.io/v1"></script>

This will give you the functional carousel component below. It’s as easy as copy & paste to get a component working on your web page.

We have just created our very first component!

You can also open this link to see the same example in a jsfiddle.

The Quickstart page provides a basic text example using Component IO.

Embed Anywhere

At the core of Component IO is a system that enables components to be delivered to any platform.

<component key=ranno></component>

This code puts a simple text component on the page:

This looks pretty similar to just rendering some basic text, but Component IO has done a lot of work under the hood. The text Hello World! is not hard-coded. Instead it’s coming from the component, and that means it can be edited without touching the code on the page. This is done with an easy-to-use online dashboard.

Manage Content

Component IO makes it incredibly easy to manage content remotely through the dashboard. Once you have a component in place, you don’t need to touch your code to change the content. Let’s say you have a dropdown on your website:

and you want to be able to change its content easily. With Component IO, it’s as simple as editing in the dashboard. In this case, the dashboard would look something like

Try editing the content with the form, and notice how it changes the text in the dropdown above the form. This is what it’s like editing in the dashboard: updated content is automatically reflected on your site.

The dashboard makes Component IO excellent for teams that have non-technical members and for advanced developers who want to focus on other parts of the codebase. It also means you can handle edits from your phone while sitting next to a pool, which is a nice side effect.

Adapt on the Fly

Component IO does more than just deliver content. It actually links data from components with the DOM, meaning everything is reactive. How do we know? Just try it with this next component.

<component key=orllm></component>

Open up your browser’s developer console and type Component('orllm').text = 'Foobar'. You should see the rendered Change me in the console example here update accordingly.

Similarly, you can get values from a component at any time. Try typing Component('orllm').text into your developer console to see for yourself.

Load Fast

Speed is one of the most important factors on the web, so Component IO is focused on it. Component IO does a lot behind the scenes to keep your page moving quickly.

Regardless of how many components you put on a page, Component IO makes just one API call to get everything it needs. That means less time spent waiting for separate stylesheets or templates to download. With Component IO, everything comes down the wire together.

Components are cached on the server side, which means they get delivered instantly, without requiring any database lookups.

Ready for More?

Get started creating your own components!

Sign upOnce logged in, you can create your own components

Or learn more about using Component IO: