Embed HTML content anywhere 📰 🚀

Tyler Warnock

Follow

Feb 23, 2017 · 3 min read

This tutorial takes 5–10 minutes.

In this tutorial you will use a web component to render HTML on a webpage. Once the component is in place, you’ll be able to edit the content without touching your code.

Demo here. All the code for this tutorial is available on github.

The web page

Say we have a basic landing page that needs some content to describe the main product:

We could simply hard-code a description, but this is a great example of where the marketing team or a client might want to make changes later. So instead, we can use a content component, which will make it easy to change the content later if we want.

All we have to do is replace the Lorem Ipsum heading with our content component.

A content component will insert its content wherever it is placed.

To do that we simply replace <h1>Lorem Ipsum</h1> with

<component content></component>

and paste the Component IO script on the page:

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

The project called tutorial already has some content we can use. If you want to create your own content, you can sign up for an account and use your own project and content instead.

Now when you reload the page, you get the content from the component.

It’s that simple — the component is working, and we can now edit its content in the Component IO dashboard.

If you want to create your own components with your own content, you can sign up for an account and create your own.

The code for this tutorial is on github.

Extra: behind the scenes

When the Component IO script runs, it changes the component from

<component content></component>

to

<div component content>
  <h1>Your Favorite Source of Widgets</h1>
  <hr>
  <p>Widget Corp can help you improve your life one widget at a time. Just buy our products and you'll feel better about life, instantly!</p>
</div>

And because it’s ultimately just HTML, you can style it however you want. ✌️

If you found this helpful, click the 💚 below and follow us for more articles about Component IO.