grapesjs/docs/assets/js/35.4c1b458d.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[35],{433:function(e,t,r){"use strict";r.r(t);var a=r(14),s=Object(a.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"introduction"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#introduction"}},[e._v("#")]),e._v(" Introduction")]),e._v(" "),t("p"),t("div",{staticClass:"table-of-contents"},[t("ul",[t("li",[t("a",{attrs:{href:"#what-is-grapesjs"}},[e._v("What is GrapesJS?")])]),t("li",[t("a",{attrs:{href:"#why-grapesjs"}},[e._v("Why GrapesJS?")])]),t("li",[t("a",{attrs:{href:"#quick-start"}},[e._v("Quick Start")])]),t("li",[t("a",{attrs:{href:"#download"}},[e._v("Download")])]),t("li",[t("a",{attrs:{href:"#changelog"}},[e._v("Changelog")])])])]),t("p"),e._v(" "),t("h2",{attrs:{id:"what-is-grapesjs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#what-is-grapesjs"}},[e._v("#")]),e._v(" What is GrapesJS?")]),e._v(" "),t("p",[e._v('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. '),t("a",{attrs:{href:"https://mjml.io/",target:"_blank",rel:"noopener noreferrer"}},[e._v("MJML"),t("OutboundLink")],1),e._v("), Native Mobile Applications (eg. "),t("a",{attrs:{href:"https://github.com/facebook/react-native",target:"_blank",rel:"noopener noreferrer"}},[e._v("React Native"),t("OutboundLink")],1),e._v("), Native Desktop Applications (eg. "),t("a",{attrs:{href:"https://vuido.mimec.org",target:"_blank",rel:"noopener noreferrer"}},[e._v("Vuido"),t("OutboundLink")],1),e._v("), PDFs (eg. "),t("a",{attrs:{href:"https://github.com/diegomura/react-pdf",target:"_blank",rel:"noopener noreferrer"}},[e._v("React PDF"),t("OutboundLink")],1),e._v("), etc. So, for everything you can imagine as a set of elements like "),t("code",[e._v('<tag some="attribute">... other nested elements ...</tag>')]),e._v(" you can create easily a GrapesJS builder around it and then use it independently in your applications.\nGrapesJS ships with features and tools that enable you to craft easy to use builders. Which allows your users to create complex HTML-like templates without any knowledge of coding.")]),e._v(" "),t("h2",{attrs:{id:"why-grapesjs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#why-grapesjs"}},[e._v("#")]),e._v(" Why GrapesJS?")]),e._v(" "),t("p",[e._v("GrapesJS was designed  primarily for use inside Content Management Systems to speed up the creation of dynamic templates and replace common WYSIWYG editors, which are good for content editing, but inappropriate for creating HTML structures. Instead of creating an application we decided to create an extensible framework that could be used by anyone for any purpose.")]),e._v(" "),t("h2",{attrs:{id:"quick-start"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#quick-start"}},[e._v("#")]),e._v(" Quick Start")]),e._v(" "),t("p",[e._v("To showcase the power of GrapesJS we have created some presets.")]),e._v(" "),t("ul",[t("li",[t("a",{attrs:{href:"https://github.com/GrapesJS/preset-webpage",target:"_blank",rel:"noopener noreferrer"}},[e._v("grapesjs-preset-webpage"),t("OutboundLink")],1),e._v(" - "),t("a",{attrs:{href:"https://grapesjs.com/demo.html",target:"_blank",rel:"noopener noreferrer"}},[e._v("Webpage Builder"),t("OutboundLink")],1)]),e._v(" "),t("li",[t("a",{attrs:{href:"https://github.com/GrapesJS/preset-newsletter",target:"_blank",rel:"noopener noreferrer"}},[e._v("grapesjs-preset-newsletter"),t("OutboundLink")],1),e._v(" - "),t("a",{attrs:{href:"https://grapesjs.com/demo-newsletter-editor.html",target:"_blank",rel:"noopener noreferrer"}},[e._v("Newsletter Builder"),t("OutboundLink")],1)]),e._v(" "),t("li",[t("a",{attrs:{href:"https://github.com/GrapesJS/mjml",target:"_blank",rel:"noopener noreferrer"}},[e._v("grapesjs-mjml"),t("OutboundLink")],1),e._v(" - "),t("a",{attrs:{href:"https://grapesjs.com/demo-mjml.html",target:"_blank",rel:"noopener noreferrer"}},[e._v("Newsletter Builder with MJML"),t("OutboundLink")],1)])]),e._v(" "),t("p",[e._v("You can actually use them as a starting point for your editors, so, just follow the instructions on their repositories to get a quick start for your builder.")]),e._v(" "),t("h2",{attrs:{id:"download"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#download"}},[e._v("#")]),e._v(" Download")]),e._v(" "),t("p",[e._v("Latest version: "),t("a",{attrs:{href:"https://www.npmjs.com/package/grapesjs",target:"_blank",rel:"noopener noreferrer"}},[t("img",{attrs:{src:"https://img.shields.io/npm/v/grapesjs.svg?colorB=e67891",alt:"npm"}}),t("OutboundLink")],1)]),e._v(" "),t("p",[e._v("You can download GrapesJS from one of these sources")]),e._v(" "),t("ul",[t("li",[e._v("CDNs\n"),t("ul",[t("li",[e._v("unpkg\n"),t("ul",[t("li",[t("code",[e._v("https://unpkg.com/grapesjs")])]),e._v(" "),t("li",[t("code",[e._v("https://unpkg.com/grapesjs/dist/css/grapes.min.css")])])])]),e._v(" "),t("li",[e._v("cdnjs\n"),t("ul",[t("li",[t("code",[e._v("https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.12.17/grapes.min.js")])]),e._v(" "),t("li",[t("code",[e._v("https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.12.17/css/grapes.min.css")])])])])])]),e._v(" "),t("li",[e._v("npm\n"),t("ul",[t("li",[t("code",[e._v("npm i grapesjs")])])])]),e._v(" "),t("li",[e._v("git\n"),t("ul",[t("li",[t("code",[e._v("git clone https://github.com/GrapesJS/grapesjs.git")])])])])]),e._v(" "),t("h2",{attrs:{id:"changelog"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#changelog"}},[e._v("#")]),e._v(" Changelog")]),e._v(" "),t("p",[e._v("To track changes made in the library we rely on "),t("a",{attrs:{href:"https://github.com/GrapesJS/grapesjs/releases",target:"_blank",rel:"noopener noreferrer"}},[e._v("Github Releases"),t("OutboundLink")],1)])])}),[],!1,null,null,null);t.default=s.exports}}]);