ocif thing

An infinite canvas editor based on the OCIF spec

More about OCIF: canvasprotocol.org

ocif thing playground: ocif.jmsv.dev

ocif-thing-editor usage

https://www.npmjs.com/package/ocif-thing-editor

Install

npm install ocif-thing-editor

React component

  import { useState } from "react"

+ import { OcifEditor, useOcifEditor } from "ocif-thing-editor"
+ import "ocif-thing-editor/styles.css"

  function App() {
+   const [value, setValue] = useState(initialValue)
+   const editor = useOcifEditor({ value, onChange: setValue })

    return (
      <div style={{ width: "100vw", height: "100vh" }}>
+       <OcifEditor editor={editor} />
      </div>
    )
  }

Development

bun i
bun dev