Tabs layout
Keep an easy overview of your frontend code whitin Tabs layout
Buildin Image Cropper
Crop images locally
Moveable Masonry Layout
Move around our files in order of priority
Keep an easy overview of your frontend code whitin Tabs layout
Crop images locally
Move around our files in order of priority
Store your mockups online with theese features provided by MockItUp
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
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
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.
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.
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)
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)
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.
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
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
Fill in the form underneath, explain how to reprodouce, and maybe even attach a schreenshot.