# @cubejs-client/playground

Latest version **1.7.40** (published 2026-09-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install @cubejs-client/playground
pnpm add @cubejs-client/playground
yarn add @cubejs-client/playground
bun add @cubejs-client/playground
```

## Health

**Score 75/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; popular repo.

Warnings: low downloads; large bundle.

## Facts

| | |
|---|---|
| Version | 1.7.40 |
| Published | 2026-09-16 |
| First published | 2019-03-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 32 |
| Unpacked size | 37.3 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 20818 |
| Author | Cube Dev, Inc. |
| Maintainers | cubedevinc, statsbot, keydunov, maxim_cube |

## Links

- npm: https://www.npmjs.com/package/@cubejs-client/playground
- Repository: https://github.com/cube-js/cube
- Homepage: http://.
- Issues: https://github.com/cube-js/cube/issues
- npm.io page: https://npm.io/package/@cubejs-client/playground

## Dependencies (32)

- [less](https://npm.io/package/less.md) ^4.1.1
- [mitt](https://npm.io/package/mitt.md) ^2.1.0
- [uuid](https://npm.io/package/uuid.md) ^11.1.1
- [anser](https://npm.io/package/anser.md) ^2.1.1
- [moment](https://npm.io/package/moment.md) ^2.30.1
- [history](https://npm.io/package/history.md) ^4.9.0
- [js-yaml](https://npm.io/package/js-yaml.md) ^4.1.0
- [date-fns](https://npm.io/package/date-fns.md) ^2.16.1
- [graphiql](https://npm.io/package/graphiql.md) ^1.8.6
- [react-is](https://npm.io/package/react-is.md) ^16.8.4
- [recharts](https://npm.io/package/recharts.md) ^2.12.7
- [js-cookie](https://npm.io/package/js-cookie.md) ^2.2.1
- [camel-case](https://npm.io/package/camel-case.md) ^4.1.2
- [flexsearch](https://npm.io/package/flexsearch.md) ^0.7.21
- [graphql-ws](https://npm.io/package/graphql-ws.md) ^5.7.0
- [jwt-decode](https://npm.io/package/jwt-decode.md) ^3.1.2
- [customize-cra](https://npm.io/package/customize-cra.md) ^1.0.0
- [html-entities](https://npm.io/package/html-entities.md) ^2.3.3
- [sql-formatter](https://npm.io/package/sql-formatter.md) ^3.1.0
- [@apollo/client](https://npm.io/package/@apollo/client.md) ^3.11.4
- [cron-validator](https://npm.io/package/cron-validator.md) ^1.2.1
- [fast-deep-equal](https://npm.io/package/fast-deep-equal.md) ^3.1.3
- [react-responsive](https://npm.io/package/react-responsive.md) ^8.0.1
- [react-router-dom](https://npm.io/package/react-router-dom.md) ^5.1.2
- [@graphiql/toolkit](https://npm.io/package/@graphiql/toolkit.md) ^0.4.3
- [recursive-readdir](https://npm.io/package/recursive-readdir.md) 2.2.3
- [throttle-debounce](https://npm.io/package/throttle-debounce.md) ^3.0.1
- [react-hotkeys-hook](https://npm.io/package/react-hotkeys-hook.md) ^3.3.0
- [react-beautiful-dnd](https://npm.io/package/react-beautiful-dnd.md) ^13.0.0
- [js-object-pretty-print](https://npm.io/package/js-object-pretty-print.md) ^0.3.0
- [best-effort-json-parser](https://npm.io/package/best-effort-json-parser.md) ^1.1.2
- [codesandbox-import-utils](https://npm.io/package/codesandbox-import-utils.md) ^2.1.12

## Recent versions

- 1.7.40 (latest) — 2026-09-16
- 1.7.39 — 2026-09-15
- 1.7.38 — 2026-09-14
- 1.7.37 — 2026-09-10
- 1.7.36 — 2026-09-09
- 1.7.35 — 2026-09-07
- 1.7.34 — 2026-09-04
- 1.7.33 — 2026-09-03
- 1.7.32 — 2026-09-01
- 1.7.31 — 2026-08-31
- 1.7.30 — 2026-08-28
- 1.7.29 — 2026-08-27
- 1.7.28 — 2026-08-26
- 1.7.27 — 2026-08-26
- 1.4.5 — 2026-08-26
- … 658 more at https://npm.io/package/@cubejs-client/playground/versions

## README

<p align="center"><a href="https://cube.dev"><img src="https://i.imgur.com/zYHXm4o.png" alt="Cube" width="300px"></a></p>

[Website](https://cube.dev) • [Docs](https://docs.cube.dev) • [Blog](https://cube.dev/blog) • [Slack](https://slack.cube.dev) • [Twitter](https://twitter.com/the_cube_dev)

[![npm version](https://badge.fury.io/js/%40cubejs-backend%2Fserver.svg)](https://badge.fury.io/js/%40cubejs-backend%2Fserver)
[![GitHub Actions](https://github.com/cube-js/cube.js/workflows/Build/badge.svg)](https://github.com/cube-js/cube.js/actions?query=workflow%3ABuild+branch%3Amaster)

# Cube Playground

UI for Cube development server environment.

[Learn more](https://github.com/cube-js/cube.js#getting-started)

### React Components

`@cubejs-client/playground` provides standalone components you can embed in your application.

```jsx
import { QueryBuilder } from '@cubejs-client/playground';
// import the antd styles from the `@cubejs-client/playground` package as it overrides some variables
import '@cubejs-client/playground/lib/antd.min.css';
// alternatively you can use the default antd styles
// import 'antd/dist/antd.min.css';

const apiUrl = 'http://localhost:4000/cubejs-api/v1';
const token = 'your.token';

export default function App() {
  const query = {
    measures: ['Orders.count'],
    dimensions:  ['Orders.status']
  };

  return (
    <QueryBuilder
      apiUrl={apiUrl}
      token={token}
      initialVizState={{
        query
      }}
    />
  );
}
```

Also, you will need to move the Playground chart renderers to a public folder. Assuming the publicly accessible folder is `public`, you can execute the following script from the root of your application

```bash
#!/bin/bash

rm -rf ./public/chart-renderers 2> /dev/null
cp -R ./node_modules/@cubejs-client/playground/public/chart-renderers ./public
```

### License

Cube Client Core is [MIT licensed](./LICENSE).

---
_Source: https://npm.io/package/@cubejs-client/playground · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._