About

Store your mockups online with theese features provided by MockItUp

  • Write state of the art Html5
  • Style it all with CSS3 (Or even LESS/SASS/Scss)
  • Write your killer JavaScript
  • Crop Your Cutom images online
  • Drag And Drop files and images into the editor

Background

Often, as a web designer, you use the application Notepad (Or even Notepad ++) as your primary tool for making HTML mockups and store them locally. It may have the disadvantage of having your folders and files lying on his machine, most often on the desktop, and taking up space. Moreover, this solution is not durable either. Imagine Your Harddrive breaks down, or you lose your laptop in any way - all your files (HTML Mockups), representing some kind of value is then lost and important working hours are wasted.

Intentions

Mockitup online is intended as a successor of Notepad and works as an online HTML editor. Rather than having countless files and folders lying around anywhere, this tool provides the perfect storage for such files, folders, and images.

From time to time a web designer needs to either test tiny HTML or JavaScript snippets in order to build these into even greater projects. A web designer could also have the need for presenting some HTML Mockups for an associate, customer or something similar.

Mockitup fulfils all these needs. FOR FREE.

If you choose to create an account, either by using one of your social media logins, or by creating a new one, you will get some extended features such as: Drag and drop support, extended choice of file types, no adds ect.

Cookies Policy

We uses cookies on this Website. By using the Service, you consent to the use of cookies. Read more here

Features

No more HTML mockups messing around. With this App You can store Your State Of the Art HTML, Your killer JavaScript etc. online

Signedin Editor Open Editor
CDN - Content Delivery Network Support
Download your MockUp
Tabs layout
Masonry layout
WYSIWYG Editor
Inline editing
Drag and drop support
Image Uploads
Image Cropper
Various fileformats support 1
.less Support 2
.sass/.scss Support 3
Adds free
Number of Mockups Unlimited 1
Signedin Editor Try it

1 Additional file formats are: Dynamic Style Sheet Language (.less), eXtensible Markup Languag file (.xml), JavaScript Object Notation file (.json), Syntactically Awesome Style Sheets (.sass/.scss)

2 Follow theese instructions, and you will be able to use .less in your project. Use the CDN link to less.js for cleaner code. http://lesscss.org/usage/#using-less-in-the-browser, https://cdnjs.com/libraries/less.js/

3 Play around with these instructions. https://github.com/medialize/sass.js/, https://github.com/medialize/sass.js/blob/master/docs/getting-started.md, https://cdnjs.com/libraries/sass.js

Documentation

Take a quick tour at the documentation below. Be aware that the logged in editor is a bit different then the open one. But dont' worry, it will not be hard to destinguish between them.

Gettin started: Creating a new project (Mockup).

Once You've logget in You'll have to decide which layout You prefere. After that You have a clean Web App ready to code in. Click the New Project button in the lower left corner, and a new Project appers. Doubleclick it to change its name.

Adding files and folders to your project.

When your first project is created, You ned to add files to it. Pretty simple, just hit the + New File button in the lower left corner. A New file.txt file is instantly created, and can be renamed, or repositioned by the filemanager. (Save As)

Adding folders to your project.

Each project needs folders to keep files, and images organized. Simply click in the sidemenu where to place a folder. A star will appear at the active folder. If you whant the folder on the root of the project, just click at the project itself. Just hit the New Folder button in the lower left corner. A folder can also be created in the filemanager. (Save As)

Upload files to your project.

If You have some 3rd-Party-Files (e.g. Bootstrap and/or jQuery files ect.) You can upload them very easily. Select the Upload file or img. button in the lower left corner. In the File manager You can then drag and drop your selected files.

How to use IntelliSense (Code Editor)

MockItUp suppoer IntelliSense for files of types: Css, Js, Htm, and Html. If codeing Css or Js simply hit Ctrl + Space Button, Html supports IntelliSense automatically

Drag and drop files into editor and preview. (Code Editor)

When using the code editor You can drag and drop files from the sidemenu into the Editor. The type of file Your're dropping determin what kind of tag is getting rendered. Once dropped hit Save and click the Preview link in the bottom left corner of the editor

Contact found a Bug?

Fill in the form underneath, explain how to reprodouce, and maybe even attach a schreenshot.