> ## Documentation Index
> Fetch the complete documentation index at: https://docs.gorules.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Interactive playground

> Experiment with the GoRules visual editor directly in your browser — no installation required.

export const SdkOverview = () => {
  const sdks = [{
    name: 'Node.js',
    href: '/developers/sdks/nodejs',
    icon: 'node-js',
    color: '#68a063'
  }, {
    name: 'Python',
    href: '/developers/sdks/python',
    icon: 'python',
    color: '#3776ab'
  }, {
    name: 'Go',
    href: '/developers/sdks/go',
    icon: 'golang',
    color: '#00add8'
  }, {
    name: 'Rust',
    href: '/developers/sdks/rust',
    icon: 'rust',
    color: '#ce422b'
  }, {
    name: 'Java',
    href: '/developers/sdks/java',
    icon: 'java',
    color: '#e76f00'
  }, {
    name: 'Kotlin',
    href: '/developers/sdks/kotlin',
    icon: '/images/kotlin.svg',
    color: '#7f52ff'
  }, {
    name: 'C#',
    href: '/developers/sdks/csharp',
    icon: '/images/dotnet.svg',
    color: '#512bd4'
  }, {
    name: 'Swift',
    href: '/developers/sdks/swift',
    icon: 'swift',
    color: '#f05138'
  }, {
    name: 'WASM',
    href: '/developers/sdks/wasm',
    icon: '/images/wasm.svg',
    color: '#654ff0'
  }];
  return <div style={{
    display: 'grid',
    gridTemplateColumns: 'repeat(4, 1fr)',
    gap: '12px',
    margin: '16px 0'
  }}>
      {sdks.map(sdk => <a key={sdk.name} href={sdk.href} style={{
    display: 'flex',
    alignItems: 'center',
    gap: '10px',
    padding: '14px 16px',
    borderRadius: '8px',
    backgroundColor: '#f8fafc',
    border: '1px solid #e2e8f0',
    textDecoration: 'none'
  }}>
          <Icon icon={sdk.icon} size={18} color={sdk.color} className="my-0" />
          <span style={{
    fontSize: '14px',
    fontWeight: 500,
    color: '#1e293b'
  }}>
            {sdk.name}
          </span>
        </a>)}
    </div>;
};

The GoRules Playground lets you build, test, and export decision models without creating an account or installing anything.

<Card title="Open the Playground" icon="play" href="https://editor.gorules.io">
  Launch the visual editor in your browser
</Card>

## What you can do

The playground includes the full visual editor:

* **Decision tables** — Create spreadsheet-style conditional logic
* **Expression nodes** — Transform data with the ZEN expression language
* **Function nodes** — Write custom JavaScript for complex logic
* **Switch nodes** — Route data through conditional branches
* **Simulator** — Test your rules with sample data and see step-by-step execution

## Getting started

1. **Open the playground** — Visit [editor.gorules.io](https://editor.gorules.io)
2. **Build your graph** — Drag nodes onto the canvas and connect them
3. **Add logic** — Double-click nodes to configure rules, expressions, or code
4. **Test** — Click **Open Simulator**, enter test data, and run your decision
5. **Export** — Download the JDM file to use with GoRules SDKs

## Try these examples

### Pricing calculator

Build a decision that applies discounts based on customer tier and order value:

1. Add a **Decision Table** node
2. Configure inputs: `customer.tier`, `order.total`
3. Configure output: `discount`
4. Add rules for different scenarios

### Eligibility checker

Create a decision that determines if a user qualifies for a service:

1. Add an **Expression** node to calculate derived values (age from birthdate, etc.)
2. Add a **Decision Table** to check eligibility criteria
3. Add another **Expression** to format the response

### Risk scoring

Build a decision that calculates a risk score from multiple factors:

1. Add multiple **Decision Table** nodes for different risk categories
2. Add an **Expression** node to combine scores
3. Add a **Switch** node to route to different outcomes based on total score

## Exporting your work

Click **Export** to download your decision as a JSON file. This JDM (JSON Decision Model) file works with any GoRules SDK:

<SdkOverview />

## Limitations

The playground is designed for experimentation. For production use:

| Feature                | Playground  | BRMS      |
| ---------------------- | ----------- | --------- |
| Save decisions         | Export only | Automatic |
| Version control        | No          | Yes       |
| Team collaboration     | No          | Yes       |
| Environment management | No          | Yes       |
| Access control         | No          | Yes       |

## Embedding the editor

The visual editor is available as an open-source React component. You can embed it in your own applications:

```bash theme={null}
npm install @gorules/jdm-editor
```

```jsx theme={null}
import { useState } from 'react';
import { DecisionGraph, JdmConfigProvider } from '@gorules/jdm-editor';
import '@gorules/jdm-editor/dist/style.css';

function RuleEditor() {
  const [graph, setGraph] = useState({ nodes: [], edges: [] });

  return (
    <JdmConfigProvider>
      <DecisionGraph value={graph} onChange={setGraph} />
    </JdmConfigProvider>
  );
}
```

See the [JDM Editor documentation](/developers/tools/jdm-editor) for configuration options, simulation support, and theming.