Moebius empowers designers to visually create dynamic web content without typing a single line of code.

Download macOS Alpha
We're in

What is it?

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.

The Problem

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.

The Solution

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.

The Advantage

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.

Stencils

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

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.

• Main Buffer

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.

• Sub Buffer

Contains all styling data specific to one page.

Browser Mode

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.

Elasticity

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.

Roadmap

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:

• Animation Engine

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.

• Forms

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.

• Isolates

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.

FAQ

• How is it built?

Moebius takes full advantage of the latest HTML5 technologies. Moebius is built with Javascript. All rendering is done through the canvas element. Moebius will work as a native app in Windows and macOS.

• Why no CSS?

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.

• When will it be released?

Moebius is planned to be released in the first quarter of 2018.

• How much will the app cost?

A perpetual license will cost $50. Lifetime of free upgrades included after purchase.

• What are the minimum system requirements to run the alpha?

The lowest macOS model tested with the alpha was an (20-inch, early 2009) iMac.

• Who is it for?

Designers.

• As a designer, why should I care about performance?

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.

• How many people are working on Moebius?

As of right now only one person has been working on the project full time for two years.

• Why only one person?

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.

• What are the challenges?

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.

• Why are we being shown two different interfaces?

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.

• Why is this site not using the canvas element?

The html publishing feature is still not finished.

• The alpha is incomplete and buggy!

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.