Pondiverse - Learn

This page contains guides on how to build things for the pondiverse.

• Connect your tool to the pondiverse
• Let people open creations in your tool
• Programmatically open the pondiverse dialog
• Create your own client
• Using other stores
• Using your own store

For full reference of the pondiverse script, read the reference.
For an example of a pondiverse tool, check out the basic tool.

Connect your tool to the pondiverse

Import the pondiverse script and run the addPondiverseButton function somewhere in your tool’s code.

import { addPondiverseButton } from "https://www.pondiverse.com/pondiverse.js";

addPondiverseButton(() => {
  return {
    type: "example",
    data: "example data",
    image: canvas?.toDataURL("image/png"),
  };
});

It takes one function as an argument. The function should return an object with the following three properties. All properties are optional.

• type - A string identifying what type of creation this is. This can be anything.
• data - A string containing the data for the creation. This can be anything.
• image - A string containing a base64 encoded image. This can be anything.

Let people open creations in your tool

Add your tools to the list of tools.

{
  name: "Example tool",
  types: ["example"],
  url: "https://example.com/?id=",
}

Then you need to make sure your tool can open the creation. Get the creation’s data by using the fetchPondiverseCreation function.

import { fetchPondiverseCreation } from "https://www.pondiverse.com/pondiverse.js";

const creationParam = new URL(window.location).searchParams.get("id");
if (creationParam) {
  const creation = await fetchPondiverseCreation(creationParam);
}

Programmatically open the pondiverse dialog

You can programmatically open the pondiverse dialog by calling the openPondiverseDialog function. This is useful if you don’t want to use the default button.

import { openPondiverseDialog } from "https://www.pondiverse.com/pondiverse.js";

openPondiverseDialog(() => {
  return {
    type: "example",
    data: "example data",
    image: canvas?.toDataURL("image/png"),
  };
});

Create your own client

Pondiverse.com is a client for exploring pondiverse creations. You can create your own client too by using the fetchPondiverseCreations function.

import { fetchPondiverseCreations } from "https://www.pondiverse.com/pondiverse.js";

const creations = await fetchPondiverseCreations();

// Then display the creations in some way...

Using other stores

By default, the pondiverse stores creations in the todepondiverse store. Your client or tool can use other stores too. You can specify this by using the store option. (This will eventually be renamed to store.)

This example shows how to use the puddle store.

import { fetchPondiverseCreations } from "https://www.pondiverse.com/pondiverse.js";

const store = {
  name: "puddle",
  home: "https://iliazeus.lol/puddle/",
  addCreation: "https://api.iliazeus.lol/puddle/creations",
  getCreation: "https://api.iliazeus.lol/puddle/creations/",
  getCreations: "https://api.iliazeus.lol/puddle/creations",
};

const creations = await fetchPondiverseCreations({ store });

Using your own store

You can create your own store by creating all the endpoints that a store needs. Check out the reference for the full details.