Quick Start

Define a Component, Render with Data


First we need to import a stylesheet and ChocolateChip-UI. This is just a basic shell for the page. We have a childless unordered list #peopleList that will be the container for our component.

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <title>ChocolateChip-UI - Demo</title>
  <link rel="stylesheet" href="./css/chui-ios.css">
  <script src="js/chui.min.js"></script>
      <h1>ChocolateChip-UI is Fun</h1>
      <ul class="list" id='peopleList'></ul>


Below is the data we will use.

const people = [
  { firstName: 'Joe', lastName: 'Bodoni' },
  { firstName: 'John', lastName: 'Doe' },
  { firstName: 'Wobba', lastName: 'Rango' },
  { firstName: 'Josh', lastName: 'Rutherford' }

// Define a state object for the data:
var peopleState = new State(people)


Now that we have a document and some data, we can create a component. To do so we use new Component(). We need to tell the component what element to render the component in, what template to use, and what data. The last line tells ChocolateChip-UI to render the component:

const peopleComponent = new Component({
  element: '#peopleList',
  // Bind the component to this state object:
  state: peopleState,
  // Define its template:
  render: (person) => html`
        <h3>${ person.firstName }</h3>
        <h4>${ person.lastName }</h4>

// Render the component:
Learn More About Components

See the Pen Simple List v5 by Robert Biggs (@rbiggs) on CodePen.