399 lines
19 KiB
HTML
399 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-us">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>GrapesJS</title>
|
|
<link rel="shortcut icon" type="image/x-icon" href="./img/grapesjs-logo-2.png"/>
|
|
<meta property="og:url" content="http://grapesjs.com" />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:title" content="GrapesJS" />
|
|
<meta name="theme-color" content="#9e5381">
|
|
<meta name="description" content="Free and Open source Web Template Editor - Next generation tool for building templates without coding">
|
|
<meta name="keywords" content="site builder, web template editor, html builder, html editor">
|
|
<meta name="author" content="Artur Arseniev">
|
|
<meta property="og:description" content="Free and Open source Web Template Editor - Next generation tool for building templates without coding" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" media="screen">
|
|
<link href="https://fonts.googleapis.com/css?family=Quicksand:400,500,700" rel="stylesheet" type="text/css">
|
|
<link rel="stylesheet" type="text/css" href="stylesheets/animate.css">
|
|
<link rel="stylesheet" type="text/css" href="stylesheets/fw.min.css">
|
|
<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css">
|
|
<link rel="stylesheet" type="text/css" href="stylesheets/github-light.css">
|
|
<link rel="stylesheet" type="text/css" href="stylesheets/font-awesome.css">
|
|
</head>
|
|
<body>
|
|
|
|
|
|
<!-- <div class="product-promo">
|
|
<a target="_blank" href="https://grapedrop.com" style="text-decoration: none">
|
|
<svg class="product-promo__logo" viewBox="0 0 500 500" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="linearGradient-1">
|
|
<stop stop-color="#EAB3D5" offset="0%"></stop>
|
|
<stop stop-color="#D06E9A" offset="100%"></stop>
|
|
</linearGradient>
|
|
</defs>
|
|
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
<g>
|
|
<circle fill="#FFFFFF" cx="251" cy="251" r="250"></circle>
|
|
<path d="M244.664082,104.558858 L162.460627,248.205767 C145.186418,278.574619 143.852224,317.189676 162.460627,349.706818 C190.433829,398.588565 252.659,415.493783 301.444357,387.464755 C350.229714,359.436081 367.101474,297.087868 339.127919,248.205413 L256.924464,104.558858 C254.209082,99.813714 247.379111,99.813714 244.664082,104.558858 Z" fill="url(#linearGradient-1)" fill-rule="nonzero"></path>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</a>
|
|
Build and publish your projects online by using <a target="_blank" href="https://grapedrop.com">Grapedrop</a>
|
|
</div> -->
|
|
<section class="page-header">
|
|
|
|
<div class="width-all top-header">
|
|
<div class="columns">
|
|
<div class="column col-6 col-md-12 text-left column-logo">
|
|
<span class="logo-cont no-sel">
|
|
<img class="top-logo-grapesjs" src="img/grapesjs-logo-cl.png"/>
|
|
GrapesJS <span class="b-badge" style="display: none">beta</span>
|
|
</span>
|
|
</div>
|
|
<div class="column col-6 col-md-12 text-right">
|
|
<nav class="top-nav">
|
|
<span class="nav-item">
|
|
<a class="top-nav-link scroll-link" data-target="#support" href="##">Support</a>
|
|
</span>
|
|
<span class="nav-item">
|
|
<a class="top-nav-link scroll-link" data-target=".main-content" href="##">Features</a>
|
|
</span>
|
|
<span class="nav-item">
|
|
<a class="top-nav-link" href="/docs/">Docs</a>
|
|
</span>
|
|
<span class="nav-item">
|
|
<a class="top-nav-link" href="https://github.com/artf/grapesjs" target="_blank">
|
|
<i class="fa fa-github" aria-hidden="true"></i> Github
|
|
</a>
|
|
</span>
|
|
<span class="nav-item">
|
|
<a class="top-nav-link tooltip tooltip-bottom" href="https://twitter.com/grapesjs" target="_blank" data-tooltip="Stay Tuned">
|
|
<i class="fa fa-twitter" aria-hidden="true"></i> Twitter
|
|
</a>
|
|
</span>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--
|
|
<div class="title-cont">
|
|
<h1 class="project-name">
|
|
<svg class="grapesjs-logo" xmlns="http://www.w3.org/2000/svg" version="1"><g id="gjs-logo"><path d="M40 5l-12.9 7.4 -12.9 7.4c-1.4 0.8-2.7 2.3-3.7 3.9 -0.9 1.6-1.5 3.5-1.5 5.1v14.9 14.9c0 1.7 0.6 3.5 1.5 5.1 0.9 1.6 2.2 3.1 3.7 3.9l12.9 7.4 12.9 7.4c1.4 0.8 3.3 1.2 5.2 1.2 1.9 0 3.8-0.4 5.2-1.2l12.9-7.4 12.9-7.4c1.4-0.8 2.7-2.2 3.7-3.9 0.9-1.6 1.5-3.5 1.5-5.1v-14.9 -12.7c0-4.6-3.8-6-6.8-4.2l-28 16.2" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-width:8;stroke:#fff"/></g></svg>
|
|
GrapesJS
|
|
<span class="b-badge">beta</span>
|
|
</h1>
|
|
</div>
|
|
-->
|
|
|
|
<h2 class="project-tagline">
|
|
Free and Open Source Web Builder Framework<br/>
|
|
<span>Next generation tool for building templates without coding</span>
|
|
</h2>
|
|
|
|
<div class="btns-cont">
|
|
<a href="./demo.html" class="btn try btn-rnd">Webpage Demo</a>
|
|
<a href="./demo-newsletter-editor.html" class="btn try btn-rnd">Newsletter Demo</a>
|
|
<a href="./demo-mjml.html" class="btn try btn-rnd">MJML Demo</a>
|
|
<div class="device-small">Sorry but your device is too small for the editor. See below for more information</div>
|
|
</div>
|
|
|
|
<div id="native-carbon"></div>
|
|
<!-- <script async type="text/javascript" src="./js/carbon-v2.js"></script> -->
|
|
|
|
<div class="bann-cont-c">
|
|
<div class="bann-cont">
|
|
<img class="banner-img" src="img/grapesjs-front-page-m.jpg" alt="GrapesJS Webpage Demo">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ddown-c" style="display:none">
|
|
<div class="ddown-icon-c animated fadeInDown scroll-link" data-target=".what-sect">
|
|
<div id="ddown-icon" style="cursor:pointer">⟨</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ddown-sharer">
|
|
<div>
|
|
<a class="btn-share sh-tw tooltip" data-tooltip="Tweet" target="_blank" href="https://twitter.com/intent/tweet?hashtags=grapesjs&ref_src=twsrc%5Etfw&text=GrapesJS%3A%20next%20generation%20tool%20for%20building%20templates%20without%20coding&tw_p=tweetbutton&url=http%3A%2F%2Fgrapesjs.com"><i class="fa fa-twitter" aria-hidden="true"></i></a>
|
|
<a class="btn-share sh-fb tooltip" data-tooltip="Share" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fgrapesjs.com"><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
|
|
<section class="section-container what-sect">
|
|
<div class="width-all">
|
|
<h1 class="section-title primary-title">What is it?</h1>
|
|
<div class="section-content">
|
|
GrapesJS is an open-source, multi-purpose, Web Builder Framework which combines different tools and features with the goal to help you (or users of your application) to build HTML templates
|
|
without any knowledge of coding. It's a perfect solution to replace the common WYSIWYG editors, which are good for content editing but inappropriate for
|
|
creating HTML structures. You can see it in action with the
|
|
<a class="scroll-link" data-target=".logo-cont" href="##">official demos</a>,
|
|
but using its
|
|
<a target="_blank" href="https://github.com/artf/grapesjs/wiki/API-Reference">API</a>
|
|
you're able to
|
|
build your own editors.
|
|
<br/>
|
|
<br/>
|
|
If you're here just to build stuff faster, open and bookmark the official demos and use them when you need it.
|
|
|
|
<div class="what-images">
|
|
<div class="what-image-cont what-image-cont1">
|
|
<img class="what-image what-image1" src="img/grapesjs-front-page-m.jpg" alt="GrapesJS Webpage Demo">
|
|
</div>
|
|
<div class="what-image-cont what-image-cont2">
|
|
<img class="what-image what-image2" src="img/sc-grapesjs-newsletter-demo.jpg" alt="GrapesJS Newsletter Demo">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="main-content">
|
|
<div class="body-c body1 width-all">
|
|
|
|
<h1 class="main-section-title">Available end-user features</h1>
|
|
|
|
|
|
<div class="info-card info-card-blocks fadeInBlock columns">
|
|
<div class="column col-6 col-md-12">
|
|
<div class="info-card-title">Drag&Drop Built-in Blocks</div>
|
|
<div class="info-card-description">GrapesJS comes with a set of built-in blocks, in this way you're able to
|
|
build your templates faster. If the default set is not enough you can always add your own custom blocks.</div>
|
|
</div>
|
|
<div class="column col-6 col-md-12">
|
|
<div class="card-images card-images1">
|
|
<div class="card-image-cont card-image-cont1 brd-image">
|
|
<img class="card-image card-image1" src="img/sc-grapesjs-blocks-prp.jpg" alt="GrapesJS Blocks">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info-card info-card-blocks fadeInBlock columns">
|
|
<div class="column col-6 col-md-12 card-column3-1">
|
|
<div class="card-images card-images3">
|
|
<div class="card-image-cont card-image-cont3 brd-image">
|
|
<img class="card-image card-image3" src="img/sc-grapesjs-style-3.jpg" alt="GrapesJS Style Manager">
|
|
</div>
|
|
<div class="card-image-cont card-image-cont32 brd-image">
|
|
<img class="card-image card-image3" src="img/sc-grapesjs-style-2.jpg" alt="GrapesJS Style Manager">
|
|
</div>
|
|
<div class="card-image-cont card-image-cont33 brd-image">
|
|
<img class="card-image card-image3" src="img/sc-grapesjs-style-1.jpg" alt="GrapesJS Style Manager">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column col-6 col-md-12 text-right card-column3-2">
|
|
<div class="info-card-title">Limitless styling</div>
|
|
<div class="info-card-description">GrapesJS implements simple and powerful Style Manager module which enables
|
|
independent styling of any component inside the canvas. It's also possible to configure it to use any of the
|
|
CSS properties</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="info-card info-card-blocks fadeInBlock columns">
|
|
<div class="column col-6 col-md-12">
|
|
<div class="info-card-title">Responsive design</div>
|
|
<div class="info-card-description">GrapesJS gives you all the necessary tools you need to optimize your
|
|
templates to look awesomely on any device. In this way you're able to provide various viewing experience.
|
|
In case more device options are required, you can easily add them to the editor.</div>
|
|
</div>
|
|
<div class="column col-6 col-md-12">
|
|
<div class="card-images card-images2">
|
|
<div class="card-image-cont card-image-cont2 brd-image">
|
|
<img class="card-image card-image2" src="img/sc-grapesjs-responsive-2.jpg" alt="GrapesJS Responsive">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="info-card info-card-blocks fadeInBlock columns">
|
|
<div class="column col-6 col-md-12 card-column4-1">
|
|
<div class="card-images card-images3">
|
|
<div class="card-image-cont card-image-cont4 brd-image">
|
|
<img class="card-image card-image3" src="img/sc-grapesjs-layers-1.jpg" alt="GrapesJS Style Manager">
|
|
</div>
|
|
<div class="card-image-cont card-image-cont42 brd-image">
|
|
<img class="card-image card-image3" src="img/sc-grapesjs-layers-2.jpg" alt="GrapesJS Style Manager">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column col-6 col-md-12 card-column4-2 text-right">
|
|
<div class="info-card-title">The structure always under control</div>
|
|
<div class="info-card-description">You can nest components as much as you can but when the structure begins to grow
|
|
the Layer Manager comes very handy. It allows you to manage and rearrange your elements extremely faster, focusing
|
|
always on the architecture of your structure.</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="info-card info-card-blocks fadeInBlock columns">
|
|
<div class="column col-6 col-md-12">
|
|
<div class="info-card-title">The code is there when you need it</div>
|
|
<div class="info-card-description">You don't have to care about the code, but it's always there, available for you. When
|
|
the work is done you can grab and use it wherever you want. Developers could also implement their own storage interfaces
|
|
to use inside the editor.</div>
|
|
</div>
|
|
<div class="column col-6 col-md-12">
|
|
<div class="card-images card-images2">
|
|
<div class="card-image-cont card-image-cont6 brd-image">
|
|
<img class="card-image card-image6" src="img/sc-grapesjs-code.jpg" alt="GrapesJS Code">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="info-card info-card-blocks fadeInBlock columns">
|
|
<div class="column col-6 col-md-12 card-column5-1">
|
|
<div class="card-images card-images3">
|
|
<div class="card-image-cont card-image-cont5 brd-image">
|
|
<img class="card-image card-image5" src="img/sc-grapesjs-assets-1.jpg" alt="GrapesJS Asset Manager">
|
|
</div>
|
|
<div class="card-image-cont card-image-cont52 brd-image">
|
|
<img class="card-image card-image52" src="img/sc-grapesjs-assets-2.jpg" alt="GrapesJS Asset Manager">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column col-6 col-md-12 card-column5-2 text-right">
|
|
<div class="info-card-title">Asset Manager</div>
|
|
<div class="info-card-description">With the Asset Manager is easier to organize your media files and it's
|
|
enough to double click on the image to change it</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- close body1 -->
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<section class="featured">
|
|
<div class="featured-title">FEATURED ON</div>
|
|
<div class="featured-cards">
|
|
<div class="featured-card">
|
|
<img class="featured-logo hn-logo" src="./img/hn-logo.png"/>
|
|
</div>
|
|
<div class="featured-card">
|
|
<img class="featured-logo ph-logo" src="./img/ph-logo.png"/>
|
|
</div>
|
|
<div class="featured-card">
|
|
<img class="featured-logo t3n-logo" src="./img/t3n-logo.png"/>
|
|
</div>
|
|
<div class="featured-card">
|
|
<img class="featured-logo wdd-logo" src="./img/wdd-logo.png"/>
|
|
</div>
|
|
<div class="featured-card">
|
|
<img class="featured-logo speckyboy-logo" src="./img/speckyboy-logo.png"/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
|
|
<section class="support section-container" id="support">
|
|
<div class="width-all">
|
|
<h1 class="section-title primary-title">Support us</h1>
|
|
<div class="section-content">
|
|
If you like the project you can help us get bigger. GrapesJS is an independent
|
|
project, made by developers in their spare time with a common purpose, to make
|
|
web development accessible to everyone. We appreciate even the smallest contribution
|
|
as it's a huge change from many aspects, but mostly, the motivation to
|
|
keep improving this tool.
|
|
</div>
|
|
<div class="suppoer-banners" style="text-align: center">
|
|
<img class="sponsor-logo" width="300" src="./img/phreesia_logo.png"/>
|
|
<br><br><br>
|
|
<h2 class="text-center">Gold Sponsors</h1>
|
|
<div class="sponsors--direct">
|
|
</div>
|
|
<div class="sponsors">
|
|
<div class="flex flex-center" style="gap: 25px;">
|
|
<div class="sp-gold-item">
|
|
<a href="https://www.phreesia.com" target="_blank" class="block">
|
|
<img class="sp-logo" src="./img/phreesia_logo.png"/>
|
|
</a>
|
|
</div>
|
|
<div class="sp-gold-item">
|
|
<a href="https://www.braze.com" target="_blank" class="block">
|
|
<img class="sp-logo" src="./img/braze_logo.svg"/>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="sp-sup">
|
|
<!-- https://opencollective.com/grapesjs#support -->
|
|
</div>
|
|
</div>
|
|
<br><br><br>
|
|
</div>
|
|
<div class="suppoer-banners" style="text-align: center">
|
|
<br><br><br>
|
|
<h2 class="text-center">Sponsors</h1>
|
|
<div class="sponsors--direct">
|
|
</div>
|
|
<div class="sponsors">
|
|
<div style="overflow: auto;">
|
|
<object type="image/svg+xml" data="https://opencollective.com/grapesjs/tiers/sponsors.svg?avatarHeight=64"></object>
|
|
</div>
|
|
</div>
|
|
<br><br><br>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<section class="footer-content">
|
|
<div class="footer-c width-all">
|
|
<div class="title">
|
|
The project is still under development, so
|
|
<a class="darker-link" href="https://twitter.com/grapesjs" target="_blank">stay tuned</a>.
|
|
<br/>
|
|
Being a free and open source project contributors and supporters are extremely welcome.
|
|
</div>
|
|
<div class="btns-c">
|
|
<a class="btn btn-gjs" href="/docs/">Get Started</a>
|
|
</div>
|
|
</div>
|
|
<div class="madewith-c">
|
|
<span class="madewith">Site built with <br/>
|
|
<span class="logo-bot-c"><img class="bot-logo-made" src="img/grapesjs-logo-cl.png"/> rapesJS</span>
|
|
</span>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<section class="copyr-content">
|
|
<div class="copyr-c width-all">
|
|
made with <span class="animated pulse infinite" style="display: inline-block">♥</span> by <a class="darker-link" href="https://github.com/artf">Artur Arseniev</a>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
|
|
|
ga('create', 'UA-74284223-1', 'auto');
|
|
ga('send', 'pageview');
|
|
</script>
|
|
|
|
<script src="js/jquery.js"></script>
|
|
<script src="js/gifffer.min.js"></script>
|
|
<script src="js/main.js"></script>
|
|
</body>
|
|
</html>
|