Need help with Appfairy?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

207 Stars 27 Forks MIT License 141 Commits 8 Opened issues


A CLI tool to Migrate a Webflow project into a React app

Services available


Need anything else?

Contributors list

# 41,418
136 commits
# 344,616
1 commit



I'm just tired going through a design and translating it into React components. Appfairy is a CLI tool that does that for you - by running a single command the design will be transpiled into React components. As for now Appfairy works with Webflow only for web React apps, but the near future plans are to have that compatible with Sketch and React Native.


Since machine generated assets aren't very easy to maintain due to their complexity, Appfairy takes on an old school approach where a single component is made out of a view and a controller. The view is automatically generated by Appfairy and shouldn't be changed, we treat it as a black box. The controller however is user defined. Every element within the controller is a proxy to an element within the view.

Here's an example of a possible controller:

import React from 'react'
import ConsultFormView from '../views/ConsultFormView'

class ConsultFormController extends React.Component { state = {}

render() { return ( ) }

setName = (e) => { this.setState({ name: }) } setPhone = (e) => { this.setState({ phone: }) }

setEmail = (e) => { this.setState({ email: }) }

setDescription = (e) => { this.setState({ description: }) }

submit = () => { alert( ${} ${} ${} ${this.description} ) } }

export default ConsultFormController

This way the view can be changed without us worrying about re-binding the event listeners and props.

For an in-depth explanation regards Appfairy be sure to check-out the following:

  • Medium blog post - An introduction to Appfairy and the motives behind it.

  • YouTube video - I walk through Appfairy and an implementation of an example app.

  • Example app - An example for a simple app which uses Appfairy.


Appfairy is a CLI tool that can be installed using NPM:

$ npm install appfairy -g

After exporting your Webflow project into a zip file, simply unzip it into a directory called

in the root of your project and run
$ appfairy
. Be sure to stash all your git changes as beforehand as Appfairy uses git as a version control. After doing so you'll notice that a new git-commit has been created saying
appfairy: Migrate
. This commit include all the changes that Appfairy has made, and shouldn't be edited or reworded.

The commit consists of the following files (regardless if they were added, modified or deleted):

  • public/ (public assets which should be served by our app's server)

    • images/
    • fonts/
    • css/
  • src/

    • scripts/ (scripts that should be imported in index.js)
    • styles/ (css files that should be imported in index.js)
    • views/ (contains ConsultFormView - further explanation below)

The output can be controlled using a config file named

which should be located in the root of the project. The config file may (or may not) include some of the following options:
  • prefetch (boolean) - Prefetch the styles and scripts which are necessary for the design to work. If not specified, the scripts and styles will be fetched during runtime. An example app with prefetching enabled can be found here.

  • source (source) - Can either be set to

    and represents the studio name that generated the basic CSS and HTML assets. If not set there will be little to no difference in the transpilation process but it will however make the CSS encapsulation more accurate. Examples for Webflow and Sketch apps can be found here.
  • input (string) - The input dir for the Webflow exported files. Defaults to

    dir in the root of the project.
  • output (string/object) - If a string was provided, the output will be mapped to the specified dir. If an object, each key in the object will map its asset type to the specified dir in the value. The object has the following schema:

    • public (string) - Public dir. Defaults to
    • src (string/object) - Source dir. If a string is provided, all its content will be mapped to the specified dir, otherwise the mapping will be done according to the following object:
    • scripts (string) - Scripts dir. Defaults to
    • styles (string) - Scripts dir. Defaults to
    • views (string) - Scripts dir. Defaults to

Alternatively, you may provide (extra) options through the command line like the following:

$ appfairy [...options]

The CLI tool supports the following options:

  • --prefetch

  • --source/--src

  • --input/--in

  • --output/--out

  • --config

The behavior of Appfairy will change according to the specified options as detailed above, and the rest is self explanatory.



We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.