Develop & Run

Updated

Sketchflow.ai includes a full app generation process inside the platform, completing user journey, creating refined designs and native code to support later development and operation.

With our One-click Code Generator feature, once you've refined your product design, the application code is available instantly.

1. Transform Your Apps into Web/Mobile Code with Visualization

Near the Design panel, click the [Code] button in the top bar to open the code workspace.

Here you can generate the web/app code of your product to continue the development process. With the code generated by Sketchflow, web/app developers can quickly move from designs to implementation in their preferred environment.

Code-workspace

  • Generate Project Code by type

When you click the [Generate] button, the export flow adapts to how the project was created.

For Web App

The Code workspace opens directly to the code files, without converting process.

Web-code-files

For Mobile App

The Code workspace prompts you to choose the code formats based on your target platform.

Available outputs on Sketchflow.ai: Android (Kotlin) and iOS (Swift), select it on your needs.

Choose-formats

  • Error Auto-fixed

Sketchflow's code generator will check for syntax errors or type issues during compilation, then fix and rebuild the corresponding code.

Auto-fixed

  • Review the Generated Code Structures and Dependencies

When the app code is still processing, you can view the AI model's reasoning in the right sidebar. The AI-driven process is completely transparent and visible.

AI-model's-reasoning

The generated code can be reviewed on the code panel, you can also click on the left sidebar to review code files upon layers.

Review-code-files

Quickly searching for particular files, input the file/element name in [Search].

Search-for-files

2. Run the App Code

After reviewing of generated app code, Sketchflow also enables you to run the code in the platform. You can instantly preview your project in the already deployed state, through the cloud hosting or simulator.

For Web Projects

  • Click the [Run] button to pre-publish your web project through cloud hosting.

    Run-button

  • You’ll be redirected to a simulated web page that demonstrate the published version of your project. Utilize this environment to perform full end-to-end testing—navigate through pages, verify interactions, check layout and performance.

    Cloud-hosting-for-web

For Mobile App

  • Click the [Run] button to install your app in a simulator. 10 mins free run for each mobile app, can be multiple runs added up.

    Simulation-runs-button

  • You can select the Running Device and Operating System version here, to achieve the most realistic operating environment.

    Run-settings

  • After confirming the Settings, click Tap to Start on the phone screen to run your mobile app.

    Running-app

  • When the app is running, you can’t reset the device and operating system.

    Cannot-reset

  • Click [Session complete] to suspend operation process, you can view how long it has been running at the bottom hints.

    End-of-run
    Runtime-duration

Tips

The Android Application download package included an APK. Watch as it seamlessly downloads and installs on your phone, delivering a real working app!

3. Download Code

If you are fulfilled with the code preview, click [Export] to download the ZIP of your code files.

React.js for Web App, Kotlin for Android and Swift for iOS.

Download-files

Click [History] to view and manage your current and past code generations.

Generation-history

4. Convert Legacy HTML to React.js Formats (For Old Projects)

If you have created some projects before the 25.9.0 version, Sketchflow supports converting your old project's HTML to React.js format.

Open the old project, click [Code] to open code panel, click [Generate], Sketchflow will finish the conversion with no credit needs.

No-credit-needs

5. Generation Notice

Before you click to generate app code, there is a Generation Notice for you.

  • During conversion, the project cannot be edited. Backup files in both HTML and Sketch formats will be downloaded in case you need to make visual adjustments later. If you'd like to keep the original version, please make a copy or import it before starting the conversion.

Duplicate-notice

For AI-Driven conversion, the process takes some time. You can check the estimated cost time based on the scale of your project in the notice. When Sketchflow finish the conversion, you will be informed via email.

Duration-hint

Tips

  • Sketchflow.ai delivers Native App Code. Complete your app/web just by connecting your backend and APIs, then configure environments, auth, and testing.

  • Our Native Code offers unbeatable advantages over other cross-platform alternatives. It guarantees superior performance and a seamless, smoother user experience that truly matches each platform's features and behaviors. Furthermore, Native Code ensures higher stability and full access to device capabilities, giving you a competitive edge and future-proofing your apps.

Sketchflow.ai can save your time and hassle of intermediate code conversions and lets you drop the code directly into your development environment.