Get started with datacomb CDN

MIT licensed

Datacomb is a library for building reusable, composable UI components with data-driven rendering.

Tags:
  • data
  • d3
  • visualization
  • datavis

Stable version

Copied!

How to start using datacomb CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with datacomb CDN - cdnhub.io</title>
  <script src="https://cdn.jsdelivr.net/npm/datacomb@1.2.1/datacomb.min.js"></script>
  <style>
    .dc-container {
      border: 1px solid #ccc;
      padding: 1rem;
    }
  </style>
</head>
<body>
  <div id="app">
    <dc-container class="dc-container">
      <h1 dc-if="{data.title}">{data.title}</h1>
      <p dc-if="{data.message}">{data.message}</p>
      <button dc-on-click="{handleClick}">Click me!</button>
    </dc-container>
  </div>
  <script>
    const data = { title: "Welcome to Datacomb!", message: "Click the button to change the message." };

    function handleClick() {
      data.message = "You clicked the button!";
    }

    dc.render(document.getElementById("app"), { data });
  </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions