# Use and adapt grapesjs

Use the documented interfaces and source layout for **grapesjs**. The sections below retain the README’s examples and configuration details.

## Usage

```html
<link rel="stylesheet" href="path/to/grapes.min.css" />
<script src="path/to/grapes.min.js"></script>

<div id="gjs"></div>

<script type="text/javascript">
  var editor = grapesjs.init({
    container: '#gjs',
    components: '<div class="txt-red">Hello world!</div>',
    style: '.txt-red{color: red}',
  });
</script>
```

For a more practical example I'd suggest looking up the code inside this demo: http://grapesjs.com/demo.html

## Development

Follow the [Contributing Guide](https://github.com/GrapesJS/grapesjs/blob/dev/CONTRIBUTING.md).

## Commands in the root manifest

The captured [package.json](https://github.com/Up-to-code/grapesjs/blob/HEAD/package.json) declares the following scripts. Run them from the directory containing that manifest.

| Command | Script |
| --- | --- |
| `npm run start` | `pnpm --filter grapesjs start` |
| `npm run test` | `pnpm -r run test` |
| `npm run lint` | `eslint .` |
| `npm run build` | `pnpm -r run build` |

## Troubleshoot a local change

1. Reproduce the smallest example from the [quick-start guide](/docs/up-to-code-grapesjs/quick-start-guide).
2. Compare required configuration and dependency versions with the README.
3. Check the linked issue tracker for the same error. Include the command, runtime version, and relevant error when reporting a problem; omit credentials.

## Source and help

- [GitHub repository](https://github.com/Up-to-code/grapesjs)
- [Original README](https://github.com/Up-to-code/grapesjs/blob/dev/README.md)
- [Issues and existing reports](https://github.com/Up-to-code/grapesjs/issues)
- [Open the project website](https://grapesjs.com)


This catalog entry is a fork. The README may describe upstream packages, domains, or release procedures; those destinations do not establish a separate release of this fork.