Skip to main content

Run Bluefish

Welcome to the Bluefish documentation! This page will show you how to run Bluefish if you just want to get started coding. If you want to learn more about Bluefish, check out our tutorial.

If you just want to play around with Bluefish, feel free to edit or fork the sandbox below!

(Hint: Try changing the spacing between the planets.)

Open on CodeSandboxOpen Sandbox
import { Bluefish, Group, StackH, StackV, Circle, Text, Ref, Background, Arrow, Align, Distribute, Rect } from "@bluefish-js/solid";

const App = () => {
  return (
    <Bluefish>
      {/* Bluefish is a diagramming library for SolidJS */}
      {/* You can specify UI-like components such as Row and Background */}
      <Background padding={20}>
        <StackH spacing={50}>
          <Circle name="mercury" r={15} fill="#EBE3CF" stroke-width={3} stroke="black" />
          <Circle r={36} fill="#DC933C" stroke-width={3} stroke="black" />
          <Circle r={38} fill="#179DD7" stroke-width={3} stroke="black" />
          <Circle r={21} fill="#F1CF8E" stroke-width={3} stroke="black" />
        </StackH>
      </Background>
      {/* But you can also use *relations* like Align and Distribute */}
      <Align alignment="centerX">
        <Text name="label">Mercury</Text>
        {/* Bluefish lets you refer to previous components using a special `Ref` component. */}
        <Ref select="mercury" />
      </Align>
      <Distribute direction="vertical" spacing={60}>
        <Ref select="label" />
        <Ref select="mercury" />
      </Distribute>
      {/* In addition to performing layout, Bluefish relations can also draw objects. */}
      <Arrow>
        <Ref select="label" />
        <Ref select="mercury" />
      </Arrow>
    </Bluefish>
  );
};

export default App;

Run Bluefish on Other Platforms​

In other environments, you can still use Bluefish, but without the SolidJS compiler and JSX syntax. Bluefish components can be used in these environments under the exported Hyperscript namespace.

For simple diagrams, the Hyperscript API isn't too different from JSX. For more advanced uses, read about the differences.

Observable​

Here's a starter notebook: https://observablehq.com/@joshpoll/bluefish-in-observable.

Svelte​

Here's a starter REPL: https://svelte.dev/repl/1fa5bf8713ac4fc2a991560e50564932?version=4.2.1.

Install Bluefish Locally​

Bluefish is built on SolidJS and works best in that environment. But it can be used in other environments, too.

Create a New SolidJS Project​

Follow these steps to create a new project: https://www.solidjs.com/guides/getting-started#try-solid

Add to an Existing SolidJS Project​

To add Bluefish to an existing SolidJS project, you can install it with your favorite package manager.

npm install @bluefish-js/solid