Moebius empowers designers to visually create dynamic web content without typing a single line of code.
Download macOS Alpha
Moebius is a website production and publishing platform made for designers with no previous web development experience. From start to finish, Moebius gives designers the flexibility and power they need to create dynamic web content in a code free environment.
Creating, managing and publishing a website is a messy process. Designers want a tool that empowers them to create websites that are beautiful and functional. Not just some tool that only creates mockups for other developers to build on top of. The problem with the current workflow is that even if the designer has a good idea of how the box model and CSS rendering work, his designs will still be constrained because of how messy the DOM is structured. Their designs will never look as intended and he/she will end up having to adapt (downgrade) their work to be browser “standards” compatible.
Moebius provides all the features a designer needs to visually create a fully functional website. All actions in Moebius are code-free, no developer jargon is used. Everything is design centric. Design integrity is kept intact regardless of what device or browser is being used, removing the nuances of cross browser testing. Dynamic content integration in Moebius allows websites to be as flexible and complex as requirements dictate.
All existing solutions in one way or another expose the user to code. They force the user to learn the intricacies of the box model and CSS styling. Each and every one of these tools fall short on their promise by leaving the user with simple static websites that look the same or even worse, just a mockup. Moebius takes full advantage of the latest HTML5 technologies in web-rendering. This allows Moebius to work exactly like the tools (Photoshop, Illustrator, etc.) designers have always used by employing its own rendering engine. Moebius also possesses a unique feature (Stencil Engine) that gives the designer the ability to preview dynamic layouts with API data.
Rendering and interactivity is consistent across all major browsers.
Client-Side Scripting has always been a setback to a designer’s creativity and workflow. Stencils provide a simple way to visually create and lay out dynamic content. From API calls to URL requests, Moebius fetches structured data and re-uses it to populate any page with defined Stencils.
Style buffers remove the tedious process of styling HTML manually by handling all of the rendering data consistently across all browsers. Style buffering is exclusively built for Moebius from the ground up with performance in mind.
Stores all styling data for common elements shared throughout several or all pages, it also houses the data for stencils. This nexus results in faster page load times.
Contains all styling data specific to one page.
In browser mode changes in state can be tested by user triggered events like mouse hovering. Static properties can be applied to any element, enabling them to keep a fixed position relative to the viewport. Links are created by attaching an URL to an element.
Building responsive websites that smoothly transition layouts between different screen sizes consistently across all browsers is really difficult to do. Moebius implements elasticity to handle smooth layout transitions. All elements can be extended, compressed, and sized at the click of a button to gracefully mold any layout on any screen.
Most of the core features in Moebius are complete. But there are still some other features that need to be polished or are still not integrated in the program yet. Some of the features that still need to be integrated are:
Besides making your websites look more unique, animations can also enhance the UX. A lot of work is being done to provide a tool that allows you to easily create smooth animations that perform well on all devices.
No website is complete without forms. Moebius lets you create forms easily and test them quickly in browser mode. Forms can pass data to servers and can also request data from servers that ends up being rendered inside stencils.
Embedded media like Youtube videos run in iframes (isolated contexts). With isolates you can manipulate interactive media from external sources visually. Isolates are not only limited to video or audio players, for example you can also insert a canvas element to run web games.
CSS is meant to be read and written by developers. Besides having a high learning curve, CSS is not 100% cross-compatible across all browsers.
Moebius is planned to be released in the first quarter of 2018.
A perpetual license will cost $50. Lifetime of free upgrades included after purchase.
The lowest macOS model tested with the alpha was an (20-inch, early 2009) iMac.
It is well known that faster page load times and smooth interactivity increase user engagement and conversion. Our main goal is to allow you to create websites that perform just as well as websites created by professional developers.
As of right now only one person has been working on the project full time for two years.
The entire project has been self funded. The macOS alpha is the result of a lot of iteration. It would have been irresponsible to bring other people into the project without a clear direction during the early stages of development, and without funds to pay them. Now that all of the requirements have been set and there is a clear path to the finish line, the funds obtained in the Indiegogo campaign will help increase the speed of development by increasing the size of the team. The first addition to the team will be a UI designer.
Building a fully functional visual editor is an enormous task. Completing the system that mimics the behaviors, and renders the layouts of web pages is extremely difficult. Most of the core challenges are complete. A lot of the work left is polishing the usability of the GUI, and integrating many of the features in the first prototype into the new interface.
The hardest part in the development process of the application is arguably the GUI itself. Not having a full time designer laying out the interface components doesn't help also. But getting the interface to work in a usable and smooth manner like the one in Photoshop is very time consuming. Some of the missing features in the program are not accessible because they have not been exposed in the interface yet.
This is how the interface looked after one year of development.
This is how the interface looks after two years of development.
The html publishing feature is still not finished.
The alpha is meant to be a proof of concept. You can expect to find minor bugs in the program. The rendering engine still needs fine tuning. Seams between components might be visible. The (15-inch, late 2016) MacBook Pro produces artifacts. Features like copy and pasting are missing because they are not 100% complete. A lot of nuances have to be taken into consideration as some actions in the interface emit side effects from one element to another. For example, when you copy an element inside a page that contains multiple breakpoints. It has to be taken into account what happens to that element after it gets pasted into another page with different breakpoints, the results can be confusing. Integration of google web fonts as the default font library is planned, you will also be able to insert your own fonts.