sample2.js

import { EditorCanvas, useEditor } from "@opendesign/react";
import { importFile } from "@opendesign/universal";
import { Suspense, useState } from "react";

export function MinimalImport() {
  const [design, setDesign] = useState();
  if (!design) {
    return (
      <input
        type="file"
        onChange={(event) => {
          importFile(event.currentTarget.files[0]).then((v) => setDesign(v));
        }}
      />
    );
  }
  return <Editor design={design} />;
}

function Editor({ design }) {
  const editor = useEditor({ design });
  return (
    <Suspense fallback="Loading...">
      <EditorCanvas editor={editor} />
    </Suspense>
  );
}