Back to all frameworks

CSV importer and spreadsheet editor for JavaScript

Install @updog/data-editor-wc, drop the Web Component into your page, and give users a full import and edit flow. 100% client-side, no upload server, flat $19/domain.

index.html 
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
</head>
<body>
  <button id="open-btn">Open Importer</button>
  <updog-editor id="editor"></updog-editor>

  <script type="module">
    import "@updog/data-editor-wc";
    import "@updog/data-editor-wc/styles.css";

    const editor = document.getElementById("editor");

    editor.configure({
      apiKey: "YOUR_API_KEY",
      columns: [
        { id: "name", title: "Name" },
        {
          id: "passport",
          title: "Passport",
          validators: [{ type: "required", message: "Passport is required" }],
        },
      ],
      primaryKey: "passport",
      onComplete: (result) => {
        console.log(result);
        editor.hide();
      },
    });

    editor.addEventListener("close", () => editor.hide());

    document
      .getElementById("open-btn")
      .addEventListener("click", () => editor.show());
  </script>
</body>
</html>
View the full example on GitHub

Try it in the browser

Install the package, add your columns, render the component. Free on localhost. Every feature included.

Go to console Read the docs