Text web component tutorial

This tutorial takes 5-10 minutes.

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

Demo here

Getting Started

There are 2 ways to view the file: by downloading or by cloning this repository.

Option A: direct download

Download the code as a .zip file using the above button. Unzip the package and view the web page by opening index.html with your browser.

Option B: git clone and run with node

• In your terminal window, run

git clone https://github.com/component-io/tutorial-text-component.git
cd tutorial-text-component
npm install
npm start

• Visit http://localhost:3000 in your browser

The web page

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 text component, which will make it easy to change the content later if we want.

Find the text in line 68 of index.html

Need some content!

and replace it with the following

<component text></component>

Also paste the Component IO script on line 263 of index.html:

<!-- 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 instead.

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

It's that simple -- your component is working, and you can now edit its content in the Component IO dashboard.

Sign up to create your own component and edit it with the dashboard.

Extra: behind the scenes

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

<component text></component>

to

<div component text>New Age is an app that will help you save time, money, or anything else!</div>

And because it's ultimately just HTML, you can style it however you want.

Other

Credit where it's due

This project is based on Start Bootstrap, which is based on the Bootstrap framework.

Bugs and Issues

Have a bug or an issue with this template? Open a new issue here on GitHub.

Copyright and License

Copyright 2017 Component IO. Code released under the MIT license.