{"id":154,"date":"2019-01-27T17:09:45","date_gmt":"2019-01-27T17:09:45","guid":{"rendered":"https:\/\/bootstrapshuffle.com\/blog\/?p=154"},"modified":"2019-01-30T16:39:24","modified_gmt":"2019-01-30T16:39:24","slug":"two-things-to-pay-attention-when-creating-page-builder","status":"publish","type":"post","link":"https:\/\/shuffle.dev\/blog\/2019\/01\/two-things-to-pay-attention-when-creating-page-builder\/","title":{"rendered":"Two things to pay attention to when creating a Page Builder"},"content":{"rendered":"\n<p class=\"mb-6 leading-loose\">The authors of Pagedraw.io announced a few days ago that they are shutting down the project and the source code has been made available at GitHub.<\/p>\n\n\n\n<ul class=\"list-disc mb-4\"><li class=\"mb-2 ml-8\"><strong>Bad news<\/strong>: We also work at the export to React<\/li><li class=\"mb-2 ml-8\"><strong>Good news<\/strong>: At <g class=\"gr_ gr_5 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep\" id=\"5\" data-gr-id=\"5\">GitHub<\/g> you can see how others have done it<\/li><\/ul>\n\n\n\n<p class=\"mb-6 leading-loose\">Looking from the outside, in Pagedraw.io there were at least two problems.<\/p>\n\n\n\n<h3 class=\"mb-6 text-2xl font-bold\">1. It is not known who their tool is for<\/h3>\n\n\n\n<p class=\"mb-6 leading-loose\">Their last post at Medium starts with: \u201eWe often get the question of who the target audience of Pagedraw is: designers or developers.\u201d.  <\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">In Bootstrap Shuffle I wanted that it was clear from the start. Therefore our slogan is \u201e<a href=\"https:\/\/bootstrapshuffle.com\" class=\"text-brand-blue underline hover:no-underline\">Bootstrap builder for busy DEVELOPERS<\/a>\u201d. <\/p>\n\n\n\n<h3 class=\"mb-6 text-2xl font-bold\">2. It is very difficult to do a universal, simple to use <g class=\"gr_ gr_8 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar only-ins doubleReplace replaceWithoutSep\" id=\"8\" data-gr-id=\"8\">editor<\/g> that will suit everyone. <\/h3>\n\n\n\n<p class=\"mb-6 leading-loose\">Choosing one technology (in our case Bootstrap), it is much easier to build an editor the handling of which is simple. Basically, our styles editor is UI for Sass variables used in Bootstrap. <\/p>\n\n\n\n<figure class=\"wp-block-image mt-8 mb-8\"><img decoding=\"async\" loading=\"lazy\" width=\"1201\" height=\"630\" src=\"https:\/\/bootstrapshuffle.com\/blog\/wp-content\/uploads\/2019\/01\/SHUFFLE.png\" alt=\"\" class=\"wp-image-156\"\/><figcaption class=\"mt-2 text-sm leading-loose text-center\">Bootstrap SASS (left) and Bootstrap Shuffle editor (right)<\/figcaption><\/figure>\n\n\n\n<p class=\"mb-6 leading-loose\">Anyway, I look forward to the promised post in which the authors will share their lessons learned on their tool.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The authors of Pagedraw.io announced a few days ago that they are shutting down the project and the source code has been made available at GitHub. Bad news: We also work at the export to React Good news: At GitHub you can see how others have done it Looking from the outside, in Pagedraw.io there [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[12,8,10],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Two things to pay attention to when creating a Page Builder | Shuffle<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/shuffle.dev\/blog\/2019\/01\/two-things-to-pay-attention-when-creating-page-builder\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Two things to pay attention to when creating a Page Builder | Shuffle\" \/>\n<meta property=\"og:description\" content=\"The authors of Pagedraw.io announced a few days ago that they are shutting down the project and the source code has been made available at GitHub. Bad news: We also work at the export to React Good news: At GitHub you can see how others have done it Looking from the outside, in Pagedraw.io there [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/shuffle.dev\/blog\/2019\/01\/two-things-to-pay-attention-when-creating-page-builder\/\" \/>\n<meta property=\"og:site_name\" content=\"Shuffle\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/BootstrapShuffle\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-01-27T17:09:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-01-30T16:39:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/bootstrapshuffle.com\/blog\/wp-content\/uploads\/2019\/01\/SHUFFLE.png\" \/>\n<meta name=\"author\" content=\"Dawid Andrzejewski\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Dawid Andrzejewski\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/shuffle.dev\/blog\/2019\/01\/two-things-to-pay-attention-when-creating-page-builder\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/2019\/01\/two-things-to-pay-attention-when-creating-page-builder\/\"},\"author\":{\"name\":\"Dawid Andrzejewski\",\"@id\":\"https:\/\/shuffle.dev\/blog\/#\/schema\/person\/a2122b47f59449da5ac339f7f687f79d\"},\"headline\":\"Two things to pay attention to when creating a Page Builder\",\"datePublished\":\"2019-01-27T17:09:45+00:00\",\"dateModified\":\"2019-01-30T16:39:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/2019\/01\/two-things-to-pay-attention-when-creating-page-builder\/\"},\"wordCount\":203,\"publisher\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/#organization\"},\"articleSection\":[\"Builder\",\"Development\",\"SaaS\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/shuffle.dev\/blog\/2019\/01\/two-things-to-pay-attention-when-creating-page-builder\/\",\"url\":\"https:\/\/shuffle.dev\/blog\/2019\/01\/two-things-to-pay-attention-when-creating-page-builder\/\",\"name\":\"Two things to pay attention to when creating a Page Builder | Shuffle\",\"isPartOf\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/#website\"},\"datePublished\":\"2019-01-27T17:09:45+00:00\",\"dateModified\":\"2019-01-30T16:39:24+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/2019\/01\/two-things-to-pay-attention-when-creating-page-builder\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/shuffle.dev\/blog\/2019\/01\/two-things-to-pay-attention-when-creating-page-builder\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/shuffle.dev\/blog\/2019\/01\/two-things-to-pay-attention-when-creating-page-builder\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/shuffle.dev\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Two things to pay attention to when creating a Page Builder\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/shuffle.dev\/blog\/#website\",\"url\":\"https:\/\/shuffle.dev\/blog\/\",\"name\":\"Shuffle\",\"description\":\"Build Websites Faster with an AI Visual Editor\",\"publisher\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/shuffle.dev\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/shuffle.dev\/blog\/#organization\",\"name\":\"Shuffle\",\"url\":\"https:\/\/shuffle.dev\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/shuffle.dev\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/static.shuffle.dev\/blog\/uploads\/2021\/07\/logo.jpg\",\"contentUrl\":\"https:\/\/static.shuffle.dev\/blog\/uploads\/2021\/07\/logo.jpg\",\"width\":400,\"height\":400,\"caption\":\"Shuffle\"},\"image\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.linkedin.com\/company\/bootstrap-shuffle\/about\/\",\"https:\/\/www.facebook.com\/BootstrapShuffle\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/shuffle.dev\/blog\/#\/schema\/person\/a2122b47f59449da5ac339f7f687f79d\",\"name\":\"Dawid Andrzejewski\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/shuffle.dev\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8e22e371afd6378672a3664c09fb24fa?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8e22e371afd6378672a3664c09fb24fa?s=96&d=mm&r=g\",\"caption\":\"Dawid Andrzejewski\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Two things to pay attention to when creating a Page Builder | Shuffle","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/shuffle.dev\/blog\/2019\/01\/two-things-to-pay-attention-when-creating-page-builder\/","og_locale":"en_US","og_type":"article","og_title":"Two things to pay attention to when creating a Page Builder | Shuffle","og_description":"The authors of Pagedraw.io announced a few days ago that they are shutting down the project and the source code has been made available at GitHub. Bad news: We also work at the export to React Good news: At GitHub you can see how others have done it Looking from the outside, in Pagedraw.io there [&hellip;]","og_url":"https:\/\/shuffle.dev\/blog\/2019\/01\/two-things-to-pay-attention-when-creating-page-builder\/","og_site_name":"Shuffle","article_publisher":"https:\/\/www.facebook.com\/BootstrapShuffle\/","article_published_time":"2019-01-27T17:09:45+00:00","article_modified_time":"2019-01-30T16:39:24+00:00","og_image":[{"url":"https:\/\/bootstrapshuffle.com\/blog\/wp-content\/uploads\/2019\/01\/SHUFFLE.png"}],"author":"Dawid Andrzejewski","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Dawid Andrzejewski","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/shuffle.dev\/blog\/2019\/01\/two-things-to-pay-attention-when-creating-page-builder\/#article","isPartOf":{"@id":"https:\/\/shuffle.dev\/blog\/2019\/01\/two-things-to-pay-attention-when-creating-page-builder\/"},"author":{"name":"Dawid Andrzejewski","@id":"https:\/\/shuffle.dev\/blog\/#\/schema\/person\/a2122b47f59449da5ac339f7f687f79d"},"headline":"Two things to pay attention to when creating a Page Builder","datePublished":"2019-01-27T17:09:45+00:00","dateModified":"2019-01-30T16:39:24+00:00","mainEntityOfPage":{"@id":"https:\/\/shuffle.dev\/blog\/2019\/01\/two-things-to-pay-attention-when-creating-page-builder\/"},"wordCount":203,"publisher":{"@id":"https:\/\/shuffle.dev\/blog\/#organization"},"articleSection":["Builder","Development","SaaS"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/shuffle.dev\/blog\/2019\/01\/two-things-to-pay-attention-when-creating-page-builder\/","url":"https:\/\/shuffle.dev\/blog\/2019\/01\/two-things-to-pay-attention-when-creating-page-builder\/","name":"Two things to pay attention to when creating a Page Builder | Shuffle","isPartOf":{"@id":"https:\/\/shuffle.dev\/blog\/#website"},"datePublished":"2019-01-27T17:09:45+00:00","dateModified":"2019-01-30T16:39:24+00:00","breadcrumb":{"@id":"https:\/\/shuffle.dev\/blog\/2019\/01\/two-things-to-pay-attention-when-creating-page-builder\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/shuffle.dev\/blog\/2019\/01\/two-things-to-pay-attention-when-creating-page-builder\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/shuffle.dev\/blog\/2019\/01\/two-things-to-pay-attention-when-creating-page-builder\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/shuffle.dev\/blog\/"},{"@type":"ListItem","position":2,"name":"Two things to pay attention to when creating a Page Builder"}]},{"@type":"WebSite","@id":"https:\/\/shuffle.dev\/blog\/#website","url":"https:\/\/shuffle.dev\/blog\/","name":"Shuffle","description":"Build Websites Faster with an AI Visual Editor","publisher":{"@id":"https:\/\/shuffle.dev\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/shuffle.dev\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/shuffle.dev\/blog\/#organization","name":"Shuffle","url":"https:\/\/shuffle.dev\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/shuffle.dev\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/static.shuffle.dev\/blog\/uploads\/2021\/07\/logo.jpg","contentUrl":"https:\/\/static.shuffle.dev\/blog\/uploads\/2021\/07\/logo.jpg","width":400,"height":400,"caption":"Shuffle"},"image":{"@id":"https:\/\/shuffle.dev\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.linkedin.com\/company\/bootstrap-shuffle\/about\/","https:\/\/www.facebook.com\/BootstrapShuffle\/"]},{"@type":"Person","@id":"https:\/\/shuffle.dev\/blog\/#\/schema\/person\/a2122b47f59449da5ac339f7f687f79d","name":"Dawid Andrzejewski","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/shuffle.dev\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8e22e371afd6378672a3664c09fb24fa?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8e22e371afd6378672a3664c09fb24fa?s=96&d=mm&r=g","caption":"Dawid Andrzejewski"}}]}},"_links":{"self":[{"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/posts\/154"}],"collection":[{"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/comments?post=154"}],"version-history":[{"count":4,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/posts\/154\/revisions"}],"predecessor-version":[{"id":168,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/posts\/154\/revisions\/168"}],"wp:attachment":[{"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/media?parent=154"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/categories?post=154"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/tags?post=154"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}