CraneAI Visual Code Editor — Build apps faster

Develop apps faster with ai-powered visual code editor

CraneAi’s visual code editor makes planning, designing and building digital products a breeze — without writing code.

Ryan Hickman
CraneAi
Published in
3 min readNov 30, 2018

--

We continue to remain focused on our mission — helping product teams building better, working software, faster. We recognized the opportunity to do this by leveraging artificial intelligence and automation, tackling problems in the app development lifecycle one at a time.

The future of coding is no coding at all
~ Chris Wanstrath, CEO at GitHub

Building apps faster

CraneAi’s visual code editor is specifically designed to help teams produce robust, customizable, production-grade interfaces — faster. Read about how code based design tools improve teams ability to deliver apps.

Import ideas

You can start with a screenshot, sketch file or something from our open source UI kit. Import the view, CraneAi will analyze it with AI converting into a format that makes it editable while connecting those edits to code.

Customize

As you modify ideas your code modifies as well. Changing a label to a button for instance will transform the code from a label to a button as well. The transformation will be complete with associated properties and events. Alter design system styles, positioning, alignment, element type and any associated options in the panel.

Publish

With each change made in the visual code editor the code changes are published to github allowing you to have complete access to the native code. If you completely modify the original view your code in git will reflect those changes.

FAQ

How does CraneAi’s visual code editor compare with Sketch?

Sketch is a drawing tool where CraneAi’s visual code editor is dedicated to UI design and app development. Most notably CraneAi produces code in a project.

CraneAi’s visual code editor is similar to Sketch in the sense that it feels familiar. We’ve dedicated a lot of time crafting our interface to deliver an experience designers and developers are used to — artboards, properties panels and design systems.

What if I want to edit the code?

Not a problem — CraneAi has Github integration allowing teams to seamlessly pass code between each other on CraneAi or in their favorite IDE.

What kind of code does CraneAI create?

Today CraneAi creates production-ready client code for React & React Native. Next, we’ll add support for Swift.

Server side CraneAi creates NodeJs code.

Soon, we plan to export to Swift, Kotlin and Vue on the client side and Python and PHP server side.

Other plans include exporting to similar visual develop tools such as no-code, low-code platforms.

What are your future plans?

Our first priority is demonstrating apps developed on our core product.

Then, we’ll continue to add developers, product designers and shops to the platform.

We’re also planning a community driven app store, allowing teams to build even faster with reusable components, design systems, architectures and more.

Our goal is to continue to shrink the time it takes to build apps.

If you are interested to see more about CraneAi or if you have experience with AI and love to learn shoot us an email team@crane.ai. 🙏🏽

--

--

Ryan Hickman
CraneAi

Passionately focused on building and investing in Artificial Intelligence and the Blockchain