{"id":25629851,"url":"https://github.com/GrapesJS/preset-webpage","last_synced_at":"2026-06-10T15:30:17.547Z","repository":{"id":39859392,"uuid":"111617223","full_name":"GrapesJS/preset-webpage","owner":"GrapesJS","description":"GrapesJS Plugin Webpage Preset","archived":false,"fork":false,"pushed_at":"2023-08-11T19:02:36.000Z","size":484,"stargazers_count":350,"open_issues_count":5,"forks_count":296,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-02-15T16:08:56.383Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://grapesjs.com/demo.html","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GrapesJS.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2017-11-22T00:31:21.000Z","updated_at":"2025-02-12T03:35:03.000Z","dependencies_parsed_at":"2024-01-29T19:30:39.069Z","dependency_job_id":"4a67b687-862e-4c7f-88c5-7f1297223926","html_url":"https://github.com/GrapesJS/preset-webpage","commit_stats":null,"previous_names":["artf/grapesjs-preset-webpage"],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GrapesJS%2Fpreset-webpage","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GrapesJS%2Fpreset-webpage/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GrapesJS%2Fpreset-webpage/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GrapesJS%2Fpreset-webpage/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GrapesJS","download_url":"https://codeload.github.com/GrapesJS/preset-webpage/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239978079,"owners_count":19728273,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-02-22T19:17:45.242Z","updated_at":"2026-06-10T15:30:17.475Z","avatar_url":"https://github.com/GrapesJS.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# GrapesJS Preset Webpage\n\n[Demo](http://grapesjs.com/demo.html)\n\n\u003e From the v1.* we don't include other plugins in this one anymore, so if you need them, you have to include them manually in your project. If you want to replicate the editor from the demo, please check the source of the demo [here](https://github.com/GrapesJS/grapesjs/blob/gh-pages/demo.html)\n\n## Summary\n\n* Plugin name: **`grapesjs-preset-webpage`**\n* Commands:\n  * `gjs-open-import-webpage` Opens a modal for the import\n  * `set-device-desktop` Set desktop device\n  * `set-device-tablet` Setup tablet device\n  * `set-device-mobile` Setup mobile device\n  * `canvas-clear` Clear all components and styles inside canvas\n* Blocks:\n  * `link-block`\n  * `quote`\n  * `text-basic`\n\n## Options\n\n| Option | Description | Default |\n| - | - | - |\n| `blocks` | Which blocks to add | `['link-block', 'quote', 'text-basic']` |\n|`block`| Add custom block options, based on block id|`(blockId) =\u003e ({})`|\n| `modalImportTitle` | Modal import title | `'Import'` |\n| `modalImportButton` | Modal import button text | `'Import'` |\n| `modalImportLabel` | Import description inside import modal | `''` |\n| `modalImportContent` | Default content to setup on import model open. Could also be a function with a dynamic content return (must be a string) eg. `modalImportContent: editor =\u003e editor.getHtml()` | `''` |\n| `importViewerOptions` | Code viewer (eg. CodeMirror) options | `{}` |\n| `textCleanCanvas` | Confirm text before cleaning the canvas | `'Are you sure to clean the canvas?'` |\n| `showStylesOnChange` | Show the Style Manager on component change | `true` |\n| `useCustomTheme` | Load custom preset theme | `true` |\n\n## Download\n\n* CDN\n  * `https://unpkg.com/grapesjs-preset-webpage`\n* NPM\n  * `npm i grapesjs-preset-webpage`\n* GIT\n  * `git clone https://github.com/GrapesJS/preset-webpage.git`\n\n## Usage\n\nDirectly in the browser\n```html\n\u003clink href=\"path/to/grapes.min.css\" rel=\"stylesheet\"/\u003e\n\u003cscript src=\"path/to/grapes.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"path/to/grapesjs-preset-webpage.min.js\"\u003e\u003c/script\u003e\n\n\u003cdiv id=\"gjs\"\u003e\u003c/div\u003e\n\n\u003cscript type=\"text/javascript\"\u003e\n  var editor = grapesjs.init({\n      container : '#gjs',\n      ...\n      plugins: ['grapesjs-preset-webpage'],\n      pluginsOpts: {\n        'grapesjs-preset-webpage': {\n          // options\n        }\n      }\n  });\n\u003c/script\u003e\n```\n\nModern javascript\n```js\nimport grapesjs from 'grapesjs';\nimport plugin from 'grapesjs-preset-webpage';\n\nconst editor = grapesjs.init({\n  container : '#gjs',\n  // ...\n  plugins: [plugin],\n  pluginsOpts: {\n    [plugin]: { /* options */ }\n  }\n  // or\n  plugins: [\n    editor =\u003e plugin(editor, { /* options */ }),\n  ],\n});\n```\n\n## Development\n\nClone the repository\n\n```sh\n$ git clone https://github.com/GrapesJS/preset-webpage.git\n$ cd preset-webpage\n```\n\nInstall it\n\n```sh\n$ npm i\n```\n\nStart the dev server\n\n```sh\n$ npm start\n```\n\n## License\n\nBSD 3-Clause\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGrapesJS%2Fpreset-webpage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FGrapesJS%2Fpreset-webpage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGrapesJS%2Fpreset-webpage/lists"}