# quasar-ui-qhtmlbuilder

> A Quasar app extension for integrating GrapesJS HTML builder into Quasar applications.

Latest version **1.0.68** (published 2025-12-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install quasar-ui-qhtmlbuilder
pnpm add quasar-ui-qhtmlbuilder
yarn add quasar-ui-qhtmlbuilder
bun add quasar-ui-qhtmlbuilder
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 1.0.68 |
| Published | 2025-12-30 |
| First published | 2024-04-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 19 |
| Unpacked size | 8.4 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Dipak Sarkar |
| Maintainers | dipaksarkar |

## Links

- npm: https://www.npmjs.com/package/quasar-ui-qhtmlbuilder
- Repository: https://github.com/coders-tm/quasar-app-extension-qhtmlbuilder
- Issues: https://github.com/coders-tm/quasar-app-extension-qhtmlbuilder
- npm.io page: https://npm.io/package/quasar-ui-qhtmlbuilder

## Dependencies (19)

- [axios](https://npm.io/package/axios.md) ^1.7.7
- [grapick](https://npm.io/package/grapick.md) ^0.1.13
- [grapesjs](https://npm.io/package/grapesjs.md) ^0.21.13
- [html2canvas](https://npm.io/package/html2canvas.md) ^1.4.1
- [grapesjs-tabs](https://npm.io/package/grapesjs-tabs.md) ^1.0.6
- [@popperjs/core](https://npm.io/package/@popperjs/core.md) ^2.11.8
- [grapesjs-touch](https://npm.io/package/grapesjs-touch.md) ^0.1.1
- [grapesjs-typed](https://npm.io/package/grapesjs-typed.md) ^2.0.1
- [grapesjs-tooltip](https://npm.io/package/grapesjs-tooltip.md) ^0.1.8
- [grapesjs-style-bg](https://npm.io/package/grapesjs-style-bg.md) ^2.0.2
- [grapesjs-custom-code](https://npm.io/package/grapesjs-custom-code.md) ^1.0.2
- [grapesjs-blocks-basic](https://npm.io/package/grapesjs-blocks-basic.md) ^1.0.2
- [grapesjs-plugin-forms](https://npm.io/package/grapesjs-plugin-forms.md) ^2.0.6
- [grapesjs-plugin-export](https://npm.io/package/grapesjs-plugin-export.md) ^1.0.12
- [grapesjs-parser-postcss](https://npm.io/package/grapesjs-parser-postcss.md) ^1.0.3
- [grapesjs-preset-webpage](https://npm.io/package/grapesjs-preset-webpage.md) ^1.0.3
- [grapesjs-plugin-ckeditor](https://npm.io/package/grapesjs-plugin-ckeditor.md) ^1.0.1
- [grapesjs-tui-image-editor](https://npm.io/package/grapesjs-tui-image-editor.md) ^1.0.2
- [grapesjs-component-countdown](https://npm.io/package/grapesjs-component-countdown.md) ^1.0.2

## Recent versions

- 1.0.68 (latest) — 2025-12-30
- 1.0.67 — 2025-12-30
- 1.0.65 — 2025-06-20
- 1.0.64 — 2025-05-28
- 1.0.63 — 2024-10-13
- 1.0.62 — 2024-10-10
- 1.0.61 — 2024-10-09
- 1.0.60 — 2024-09-29
- 1.0.59 — 2024-09-29
- 1.0.56 — 2024-09-21
- 1.0.55 — 2024-09-15
- 1.0.54 — 2024-09-15
- 1.0.52 — 2024-09-13
- 1.0.50 — 2024-09-10
- 1.0.47 — 2024-09-09
- … 44 more at https://npm.io/package/quasar-ui-qhtmlbuilder/versions

## README

# Component QHtmlBuilder

[![npm](https://img.shields.io/npm/v/quasar-ui-qhtmlbuilder.svg?label=quasar-ui-qhtmlbuilder)](https://www.npmjs.com/package/quasar-ui-qhtmlbuilder)
[![npm](https://img.shields.io/npm/dt/quasar-ui-qhtmlbuilder.svg)](https://www.npmjs.com/package/quasar-ui-qhtmlbuilder)

**Compatible with Quasar UI v2 and Vue 3**.


# Component QHtmlBuilder
> A Quasar app extension for integrating GrapesJS HTML builder into Quasar applications.




# Usage

## Quasar CLI project


Install the [App Extension](../app-extension).

**OR**:


Create and register a boot file:

```js
import Vue from 'vue'
import Plugin from 'quasar-ui-qhtmlbuilder'
import 'quasar-ui-qhtmlbuilder/dist/index.css'

Vue.use(Plugin)
```

**OR**:

```html
<style src="quasar-ui-qhtmlbuilder/dist/index.css"></style>

<script>
import { Component as QHtmlBuilder } from 'quasar-ui-qhtmlbuilder'

export default {
  
  components: {
    QHtmlBuilder
  }
  
  
}
</script>
```

## Vue CLI project

```js
import Vue from 'vue'
import Plugin from 'quasar-ui-qhtmlbuilder'
import 'quasar-ui-qhtmlbuilder/dist/index.css'

Vue.use(Plugin)
```

**OR**:

```html
<style src="quasar-ui-qhtmlbuilder/dist/index.css"></style>

<script>
import { Component as QHtmlBuilder } from 'quasar-ui-qhtmlbuilder'

export default {
  
  components: {
    QHtmlBuilder
  }
  
  
}
</script>
```

## UMD variant

Exports `window.htmlBuilder`.

Add the following tag(s) after the Quasar ones:

```html
<head>
  <!-- AFTER the Quasar stylesheet tags: -->
  <link href="https://cdn.jsdelivr.net/npm/quasar-ui-qhtmlbuilder/dist/index.min.css" rel="stylesheet" type="text/css">
</head>
<body>
  <!-- at end of body, AFTER Quasar script(s): -->
  <script src="https://cdn.jsdelivr.net/npm/quasar-ui-qhtmlbuilder/dist/index.umd.min.js"></script>
</body>
```
If you need the RTL variant of the CSS, then go for the following (instead of the above stylesheet link):
```html
<link href="https://cdn.jsdelivr.net/npm/quasar-ui-qhtmlbuilder/dist/index.rtl.min.css" rel="stylesheet" type="text/css">
```

# Setup
```bash
$ yarn
```

# Developing
```bash
# start dev in SPA mode
$ yarn dev

# start dev in UMD mode
$ yarn dev:umd

# start dev in SSR mode
$ yarn dev:ssr

# start dev in Cordova iOS mode
$ yarn dev:ios

# start dev in Cordova Android mode
$ yarn dev:android

# start dev in Electron mode
$ yarn dev:electron
```

# Building package
```bash
$ yarn build
```

# Adding Testing Components
in the `ui/dev/src/pages` you can add Vue files to test your component/directive. When using `yarn dev` to build the UI, any pages in that location will automatically be picked up by dynamic routing and added to the test page.

# Adding Assets
If you have a component that has assets, like language or icon-sets, you will need to provide these for UMD. In the `ui/build/script.javascript.js` file, you will find a couple of commented out commands that call `addAssets`. Uncomment what you need and add your assets to have them be built and put into the `ui/dist` folder.

# Donate
If you appreciate the work that went into this, please consider [donating to Quasar](https://donate.quasar.dev).

# License
MIT (c) Dipak Sarkar <hello@dipaksarkar.in>

---
_Source: https://npm.io/package/quasar-ui-qhtmlbuilder · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._