Gridbox v12 - All new editor with batteries included

JR.Anand

—

—

Posted in announcements

We’re making big changes to the Gridbox editor. Here’s a look at what’s changing, why it’s changing, and how the changes are being phased out.

“So,” you ask, “why big changes? What’s the deal” Well, here’s the deal:

When we started Gridbox our goal was to help developers create faster working UI prototypes with the help of HTML, CSS, and JavaScript. Gradually from v1 to v11 Gridbox has evolved as a low code website builder for developers. We had fatty features like Drag & Drop & visual style editor. Along with that, we had a code editor for further flexibility.

But here is the problem.

Drag & Drop & visual style editor is cool, right? Then why are we calling it fatty?

Most of our target users happened to be front-end developers who love to code. While using Drag & Drop and the visual style editor they had to face several limitations and also it is not producing quality output like clean CSS or HTML code because anyone can mess up with the structure of the HTML page while using drag & drop along with the code editor.

So, based on the feedback, we’ve decided to make the code editor a primary tool while design mode is still available as an option for HTML files.

With code comes more power & flexibility, which means you can work with any CSS framework or JavaScript libraries like d3js, anime js, Alpine js, etc… without any limitations.

But wait, will it be like another code playground like Codepen or StackBlitz?

The answer is no. StackBlitz is an IDE while Codepen is a social environment & front-end playground for developers

Gridbox is not an IDE and we don’t want to create one. So, how is it different from other editors?

It is a simple online editor with batteries included for creating classic static HTML websites.

What do you mean by batteries included?

  1. Work with Bootstrap 4, Bootstrap 5, Bulma or Tailwind CSS without any setup.
  2. Save your time with our pre-built code snippets for Bootstrap, Bulma & Tailwind CSS like Headers, Footer, Authentication, Pricing Tables, Web App components
  3. Also use pre-built commonly used CSS & JavaScript Snippets.
  4. Improved Gallery with high quality images from Pexels, 300+ SVG icons, Hero SVG patterns.
  5. Instantly import Google Fonts or CSS & JavaScript libraries from CDNjs right from the editor.
  6. Above all you can clone existing templates and customize them based on your preferences.
  7. Finally deploy your project to Netlify with a custom domain.

What else has been improved?

  1. You can still access the Design mode from the code editor toolbar, when you open any HTML file.
  2. Added three different preview layouts for convenience - Split Vertical, Horizontal and full screen
  3. Optimized overall editor performance and state management for speed and stability.

What about existing design mode?

If you're a PRO user and already paid for drag and drop features, you can still access the design mode. When you open any HTML file, from the top right corner of the toolbar you can click on design button to work with drag and drop editor.

new-toolbar.jpg

Hope you enjoy the all new Gridbox. Happy coding.

Thanks so much for your continued feedback, love & support.

Kindly check on this link (https://www.gridbox.io) and spread the word :)