A CLI tool used to convert a Webflow project to React JS.
To the Webflow & React communities,
Would you be interested in a simple no-code service that allows you to plug in your Webflow site link, optionally add some simple attributes, and have it automatically generate a working Next.js / React app for you?
Complete this 1-minute survey: GO TO ANONYMOUS SURVEY
If you know someone who would benefit from this, share this survey with them. 👆
Side Note: This repository has been outdated, but I have an insane amount of resources that have been developed in the no-code Webflow to React space ever since this repo came out. All of which have been used to create both simple and enterprise-ready apps.
Thanks! @altechzilla
Webflow React from Abruptive is a CLI tool that helps designers & developers convert their Webflow projects to & React.js. Optimized by default for Create React App's (CRA) structure, yet customizable to fit any custom structure you need.
$ npm install webflow-react --save-dev
/.webflow
in your project;webflow-react
command in your project root.webflow-react
to your package.json scripts to render easier.With the current version, you can do the following by adding attributes to Webflow elements:
wfr-c
attribute and the component name as the value;wfr-d
attribute and true
as the value;wfr-empty
attribute and true
as the value;wfr-ignore
attribute and true
as the value;Since machine generated assets aren't very easy to maintain due to their complexity, Webflow React takes on an old school approach where a single component is made out of a view and a controller.
This way the view can be changed without us worrying about re-binding the event listeners and props.
Be sure to stash all your git changes as beforehand as Webflor React uses Git as a version control.
After doing so you'll notice that a new git-commit has been created saying Webflow React: Updated
.
This commit includes all the changes that Webflor React has made, and shouldn't be edited or reworded.
The commit consists of the following files (regardless if they were added, modified or deleted):
import React from 'react'
import ConsultForm from '../views/ConsultForm'
class ConsultFormController extends React.Component {
state = {}
render() {
return (
<ConsultForm>
<name onChange={this.setName} />
<phone onChange={this.setPhone} />
<email onChange={this.setEmail} />
<description onChange={this.setDescription} />
<submit onClick={this.submit} />
</ConsultForm>
)
}
setName = (e) => {
this.setState({
name: e.target.value
})
}
setPhone = (e) => {
this.setState({
phone: e.target.value
})
}
setEmail = (e) => {
this.setState({
email: e.target.value
})
}
setDescription = (e) => {
this.setState({
description: e.target.value
})
}
submit = () => {
alert(`
${this.name}
${this.phone}
${this.email}
${this.description}
`)
}
}
export default ConsultFormController
The output can be controlled using a config file named wfr.config.js
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.
source (source) - Can either be set to webflow
, sketch
and represents the studio name that generated the basic CSS and HTML assets.
input (string) - The input dir for the Webflow exported files. Defaults to .webflow
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:
static
.scripts
.styles
.pages
.Alternatively, you may provide (extra) options through the command line like the following:
$ webflow-react [...options]
Webflow React supports the following CLI options:
Webflow is a registered® trademarks of its respective holders. Its use does not imply any affiliation with or endorsement by them.
Inspired by Appfairy (Eytan Manor), the Webflow React library is a continuation of Eythan's work, to provide an easier way to convert Webflow to React JS.
Apache