index.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
  <title>Draw A Component</title>
  <meta name="description" content="Draw something and turn it into a Web Component that you can use it anywhere on your website.">
  <link rel="icon" href="images/fav.png" type="image/png">
  <link rel="canonical" href="https://wiredjs.com/">

  <meta property="og:title" content="Wired Elements">
  <meta property="og:description" content="Common UI Elements with a sketchy hand-drawn look.">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://wiredjs.com/">
  <meta property="og:image" content="https://wiredjs.com/images/logo_400.png">
  <meta property="og:image:width" content="400">
  <meta property="og:image:height" content="400">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@YourGuild">
  <meta name="twitter:title" content="Wired Elements">
  <meta name="twitter:description" content="Common UI Elements with a sketchy hand-drawn look.">
  <meta name="twitter:image" content="https://wiredjs.com/images/logo_400.png">
  <meta name="twitter:image:width" content="400">
  <meta name="twitter:image:height" content="400">

  <style>
    body {
      margin: 0;
      font-family: system-ui, sans-serif;
      font-size: 16px;
      line-height: 1.5;
      --canvas-background: white;
      --almost-black: #141720;
      --dark-grey: #232733;
      --medium-grey: #2f3545;
      --light-grey: #383f52;
      --highlight-pink: #e91e63;
      --highlight-blue: #2196f3;
      --input-border-color: #596c7a;
    }
  </style>
  <script type="module" src="./bin/main-app.js"></script>
  <!-- <script async src="./dist/dac.js"></script> -->
</head>

<body>
  <main-app></main-app>
</body>

</html>