Update Contributing.md to add build step. (#6466)

griffinkelly · artf · web-flow · commit 5a7c82870cb8 · 2025-03-31T16:05:57.000+04:00
* Update Contributing.md to add build step. Update Grapes Docs.

* Update for utm tracking

* Formatting

* Vary copy

---------

Co-authored-by: Artur Arseniev &lt;artur.catch@hotmail.it&gt;
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -37,13 +37,19 @@ Thank you for your interest in contributing to GrapesJS! We welcome all types of
    pnpm install
    ```
 
-5. Start the development server:
+5. Run the build script:
+
+   ```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
@@ -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 `<tag some="attribute">... other nested elements ...</tag>` 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
@@ -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
@@ -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
+Want an asset manager that looks great out of the box? [Try the Grapes Studio SDK!](https://app.grapesjs.com/docs-sdk/configuration/assets/overview?utm_source=grapesjs-docs&utm_medium=tip)
+:::
+
 [[toc]]
 
 ## Configuration
diff --git 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
+Need a sleek block UI that’s easy to extend and customize? [Explore the Grapes Studio SDK!](https://app.grapesjs.com/docs-sdk/configuration/blocks?utm_source=grapesjs-docs&utm_medium=tip)
+:::
+
 [[toc]]
 
 ## Configuration
diff --git 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.<br><br>
 To get a better understanding of the content in this guide, we recommend reading [Components](Components.html) and [Traits] first
 :::
 
+::: tip
+Prefer a modern UI that's production-ready? [Get started with the Grapes Studio SDK!](https://app.grapesjs.com/docs-sdk/configuration/components/overview?utm_source=grapesjs-docs&utm_medium=tip)
+:::
+
 [[toc]]
 
 ## Basic scripts
diff --git 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
+Skip the boilerplate—use a refined component editor out of the box. [Checkout the Grapes Studio SDK!](https://app.grapesjs.com/docs-sdk/configuration/components/overview?utm_source=grapesjs-docs&utm_medium=tip)
+:::
+
 [[toc]]
 
 ## How Components work?
diff --git 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
+Want pages to just work, with a polished UI? [See how the Grapes Studio SDK does it!](https://app.grapesjs.com/docs-sdk/configuration/pages?utm_source=grapesjs-docs&utm_medium=tip)
+:::
 [[toc]]
 
 ## Initialization
diff --git 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 tested, verified, and built to scale? [Browse them all in the Grapes Studio SDK!](https://app.grapesjs.com/docs-sdk/plugins/overview?utm_source=grapesjs-docs&utm_medium=tip)
+:::
+
 [[toc]]
 
 ## Basic plugin
diff --git 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
+Need more powerful and customizable storage options? [The Grapes Studio SDK has you covered.](https://app.grapesjs.com/docs-sdk/configuration/projects?utm_source=grapesjs-docs&utm_medium=tip#storage)
+:::
+
 [[toc]]
 
 ## Configuration
diff --git 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?utm_source=grapesjs-docs&utm_medium=tip) 
+:::
+
 [[toc]]
 
 ## Configuration
diff --git 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.<br><br>
 To get a better understanding of the content in this guide we recommend reading [Components](Components.html) first
 :::
 
+::: tip
+Want traits that look great and work out of the box? [See how the Grapes Studio SDK handles it.](https://app.grapesjs.com/docs-sdk/configuration/components/properties?utm_source=grapesjs-docs&utm_medium=tip#traits)
+:::
+
 [[toc]]
 
 ## Add Traits to Components
