- Make your content editable
- Create a custom component
- General usage
- AngularJS 1
- Angular 2
- Data only
- Global methods
- Component HTML
- Component CSS
- Kitchen Sink
- Content Block
- Team Page
- Contact Form
- Carousel (Slideshow)
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.
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)
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:
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.
At the core of Component IO is a system that enables components to be delivered to any platform.
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.
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.
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.
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.
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.
Get started creating your own components!
Sign upOnce logged in, you can create your own components
Or learn more about using Component IO: