diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 896ae19ee..1e46fa408 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -36,14 +36,19 @@ Thank you for your interest in contributing to GrapesJS! We welcome all types of ```bash pnpm install ``` +5. Run the build script: -5. Start the development server: + ```bash + pnpm run build + ``` + +6. Start the development server: ```bash pnpm start ``` -6. Open `http://localhost:8080/` in your browser to see the editor in action. +7. Open `http://localhost:8080/` in your browser to see the editor in action. ## Development Workflow diff --git a/docs/README.md b/docs/README.md index 57dc78734..2ccdf9689 100644 --- a/docs/README.md +++ b/docs/README.md @@ -2,6 +2,13 @@ [[toc]] +::: tip + +Supercharge your web builder with the [Grapes Studio SDK](https://app.grapesjs.com/docs-sdk/overview/getting-started) — a customizable GrapesJS experience, complete with a polished UI that’s ready to embed. + +::: + + ## What is GrapesJS? At first glance one might think this is just another page/HTML builder, but it's something more. GrapesJS is a multi-purpose, Web Builder Framework, which means it allows you to easily create a drag & drop enabled builder of "things". By "things" we mean anything with HTML-like structure, which entails much more than web pages. We use HTML-like structure basically everywhere: Newsletters (eg. [MJML](https://mjml.io/)), Native Mobile Applications (eg. [React Native](https://github.com/facebook/react-native)), Native Desktop Applications (eg. [Vuido](https://vuido.mimec.org)), PDFs (eg. [React PDF](https://github.com/diegomura/react-pdf)), etc. So, for everything you can imagine as a set of elements like `... other nested elements ...` you can create easily a GrapesJS builder around it and then use it independently in your applications. diff --git a/docs/getting-started.md b/docs/getting-started.md index 780d2873a..f53dd88a8 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -10,6 +10,12 @@ meta: This is a step-by-step guide for anyone who wants to create their own builder with GrapesJS. This is not a comprehensive guide, just a concise overview of the most common modules. Follow along to create a page builder from scratch. Skip to the end of this page to see the [final result](#final-result). +::: tip + +Looking for a customizable version of GrapesJS with an embeddable, production-ready UI? [Explore the Grapes Studio SDK!](https://app.grapesjs.com/docs-sdk/overview/getting-started) + +::: + ## Import the library Before you start using GrapesJS, you'll have to import it. Let's import the latest version: diff --git a/docs/modules/Assets.md b/docs/modules/Assets.md index 61669da79..b7a622fb5 100644 --- a/docs/modules/Assets.md +++ b/docs/modules/Assets.md @@ -8,6 +8,10 @@ title: Asset Manager In this section, you will see how to setup and take the full advantage of built-in Asset Manager in GrapesJS. The Asset Manager is lightweight and implements just an `image` in its core, but as you'll see next it's easy to extend and create your own asset types. +::: tip +Looking for the asset manager UI to be polished and ready to use? [Checkout the Grapes Studio SDK!](https://app.grapesjs.com/docs-sdk/configuration/assets/overview) +::: + [[toc]] ## Configuration diff --git a/docs/modules/Blocks.md b/docs/modules/Blocks.md index 29c4c2c12..473ddbbb5 100644 --- a/docs/modules/Blocks.md +++ b/docs/modules/Blocks.md @@ -16,6 +16,10 @@ To get a better understanding of the content in this guide, we recommend reading This guide is referring to GrapesJS v0.17.27 or higher ::: +::: tip +Looking for a polished UI and blocks, ready for customization? [Checkout the Grapes Studio SDK!](https://app.grapesjs.com/docs-sdk/configuration/blocks) +::: + [[toc]] ## Configuration diff --git a/docs/modules/Components-js.md b/docs/modules/Components-js.md index 7803d8c64..9f3c2ecbe 100644 --- a/docs/modules/Components-js.md +++ b/docs/modules/Components-js.md @@ -11,6 +11,10 @@ This guide is referring to GrapesJS v0.16.34 or higher.

To get a better understanding of the content in this guide, we recommend reading [Components](Components.html) and [Traits] first ::: +::: tip +Looking for the polished UI that's ready to use? [Checkout the Grapes Studio SDK!](https://app.grapesjs.com/docs-sdk/configuration/components/overview) +::: + [[toc]] ## Basic scripts diff --git a/docs/modules/Components.md b/docs/modules/Components.md index 47e23c8d9..f7366c025 100644 --- a/docs/modules/Components.md +++ b/docs/modules/Components.md @@ -10,6 +10,10 @@ The Component is a base element of the template. It might be something simple an This guide is referring to GrapesJS v0.15.8 or higher ::: +::: tip +Looking for the polished UI that's ready to use? [Checkout the Grapes Studio SDK!](https://app.grapesjs.com/docs-sdk/configuration/components/overview) +::: + [[toc]] ## How Components work? diff --git a/docs/modules/Pages.md b/docs/modules/Pages.md index 5de374ed3..d92e86606 100644 --- a/docs/modules/Pages.md +++ b/docs/modules/Pages.md @@ -10,6 +10,9 @@ The Pages module in GrapesJS allows you to create a project with multiple pages. This guide is referring to GrapesJS v0.21.1 or higher ::: +::: tip +Looking for the pages UI to be setup and ready to use? [Checkout the Grapes Studio SDK!](https://app.grapesjs.com/docs-sdk/configuration/pages) +::: [[toc]] ## Initialization diff --git a/docs/modules/Plugins.md b/docs/modules/Plugins.md index 5c1fff8b8..5909871d1 100644 --- a/docs/modules/Plugins.md +++ b/docs/modules/Plugins.md @@ -10,6 +10,10 @@ Creating plugins in GrapesJS is pretty straightforward and here you'll get how t This guide is referring to GrapesJS v0.21.2 or higher ::: +::: tip +Looking for plugins that are Grapes approved and tested? [Checkout the Grapes Studio SDK!](https://app.grapesjs.com/docs-sdk/plugins/overview) +::: + [[toc]] ## Basic plugin diff --git a/docs/modules/Storage.md b/docs/modules/Storage.md index 9c9dc8078..9e0c7b7bc 100644 --- a/docs/modules/Storage.md +++ b/docs/modules/Storage.md @@ -10,6 +10,10 @@ The Storage Manager is a built-in module that allows the persistence of your pro This guide requires GrapesJS v0.19.\* or higher ::: +::: tip +Looking for a more flexible storage system? [Checkout the Grapes Studio SDK!](https://app.grapesjs.com/docs-sdk/configuration/projects#storage) +::: + [[toc]] ## Configuration diff --git a/docs/modules/Style-manager.md b/docs/modules/Style-manager.md index f903b4a68..89aa31eba 100644 --- a/docs/modules/Style-manager.md +++ b/docs/modules/Style-manager.md @@ -16,6 +16,10 @@ To get a better understanding of the content in this guide, we recommend reading This guide is referring to GrapesJS v0.18.1 or higher ::: +::: tip +Looking for a UI that is easy and ready to customize? [Checkout the Grapes Studio SDK!](https://app.grapesjs.com/docs-sdk/configuration/components/overview) +::: + [[toc]] ## Configuration diff --git a/docs/modules/Traits.md b/docs/modules/Traits.md index 567240c64..b8015ace6 100644 --- a/docs/modules/Traits.md +++ b/docs/modules/Traits.md @@ -11,6 +11,10 @@ This guide is referring to GrapesJS v0.21.9 or higher.

To get a better understanding of the content in this guide we recommend reading [Components](Components.html) first ::: +::: tip +Looking for the a more polished UI for traits that's ready to use immediately? [Checkout the Grapes Studio SDK!](https://app.grapesjs.com/docs-sdk/configuration/components/properties#traits) +::: + [[toc]] ## Add Traits to Components