examples/browser-script-tag/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>IPFS in the Browser</title>
    <link rel="icon favicon" href="favicon.ico" />

    <script
      src="https://cdn.jsdelivr.net/npm/ipfs/dist/index.min.js"
      defer
    ></script>
    <script src="./src/index.js" type="module" defer></script>
  </head>
  <body>
    <h1>IPFS in the Browser</h1>
    <p>
      This page creates an IPFS node in your browser and drops it into the
      global Javascript namespace as
      <b><em style="background-color:#d7d6d6">node</em></b
      >. Open the console to play around with it.
    </p>
    <p>
      Note that opening two tabs of this page in the same browser won't work
      well, because they will share node configuration. You'll end up trying to
      run two instances of the same node, with the same private key and
      identity, which is a Bad Idea.
    </p>
    <h1 id="status">Node status: offline</h1>

    <h2>Some suggestions</h2>

    <p>Try adding a new file:</p>

    <code style="display:block; white-space:pre-wrap; background-color:#d7d6d6">
      async function addFile () { const { cid } = await node.add('Hello world!')
      console.log('successfully stored', cid) } addFile()
    </code>

    <p>
      You can cat that same file. If you used the exact same string as above
      ('Hello world!') you should have an hash like this:
      'QmQzCQn4puG4qu8PVysxZmscmQ5vT1ZXpqo7f58Uh9QfyY'
    </p>

    <code style="display:block; white-space:pre-wrap; background-color:#d7d6d6">
      async function catFile () { for await (const data of
      node.cat('QmQzCQn4puG4qu8PVysxZmscmQ5vT1ZXpqo7f58Uh9QfyY')) {
      console.log(data.toString()) } } catFile()
    </code>
  </body>
</html>