device-view

Build Progressive Web Apps, FAST!

Just Drag, Drop and Edit components to easily build your stunning App.

device-view

What is Brag'n'Drop Editor for?

Modern websites are becoming more like Apps. This means they work offline, on any device (desktops, tablets and mobiles), and allow users to save them as an Icon to the home screen.

Single Page Applications or SPA are built for the future. Both the frontend and Backend are separated from each other. So that means the Frontend HTML and styles are loaded only once and the data from the Backend is uploaded on request in a form of a json feed. This makes them extremely fast and improves user experience.

Progressive Web Apps or PWA is a way of turning the Single Page Applications to look and feel like a mobile app. Functionality includes working offline, push notifications, and device hardware access, enabling user experiences similar to native applications on mobile devices.

Brag'n'Drop Editor lets you quickly and easily create single page apps or responsive sites using components from some of the most popular frameworks on the web. We have integrated Bootstrap 3, Bootstrap 4 and Semantic UI 2 frameworks into the editor. Our plan is to add The Ionic framework into the Editor, so that you will be able to build not only web sites and apps but mobile phone apps too!

Key features and how they work!

Design features

Drag, Drop, Edit Components...

Drag, drop, move, edit premade components around your page.

Google Fonts

Google Fonts in your page

Use Google Fonts in your page, without installing any fonts.

Responsive web design

Apply Responsive styles to components

Visually apply Responsive styles to components in Design mode.

Framework actions

Framework actions

Easily apply Framework driven actions without writing any code.

Code Editing

Code Editor

Comes built in with a JavaScript and CSS code Editor.

Show Content Assist Automatically for both JavaScript and CSS, for fast code production.

Automatically validates Code for errors and warnings.

Snap to Code

Snap to code

In design mode select a component and choose an event (click, mouseover, focus…) to automatically generate and jump to the Event Code for that component.

Double Click on a button and jump directly into the Click Event Code for that button.

Use CDNJS with ease

Use CDNJS from within the Editor

Browse thousands of JavaScript and CSS libraries from cdnjs.com, directly from inside the editor.

If you want to use a script in your project, simply select the file and Brag'n'Drop Editor will automatically add a reference to the file.

Visually design your AngularJS app

Visually design your AngularJS app

Simply design your app layout visually, add a reference to AngularJS via CDNJS and then bind your data to your app.

Screenshot

Help us improve Brag'n'Drop Editor

If you want to find out how we integrated a Framework or a Web Add-on into Brag'n'Drop Editor then check out our GitHub account, were you can view the source code for the Bootstrap, Semantic UI and Font Awesome configuration files. You can also suggests improvements or report bugs.