Introduction

What is Component IO?

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 to use our carousel web component example. Open this link to take a look under the hood of Component IO and see how easy it is to get a component working on your web page.

If you want to try this component in your own project, you can simply create an .html file and paste the following code:

<component carousel id="demo"></component>
<!-- Component IO script -->
<script project="PROJECT-ID" src="https://cdn.component.io/v1"></script>

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 text id="hello"></component>

This code puts a simple text component on the page:

We have just created our very first component! 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. You should see it change 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 open up your browser’s developer console and type Component('hello').text = 'The text has changed'. You should see the rendered Hello World! example above update accordingly.

Similarly, you can get values from a component at any time. Try typing Component('hello').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.

Component Library

The Component IO library is organized into sections based on the type of component:

Ready for More?

Get started creating your own components!


Sign upOnce logged in, you can create your own components