Abstract Beta is a mobile first application focused on improving developer experience. Create mobile first application prototypes in real-time with proven UI frameworks such as React Bootstrap.


Select Device Resolution for the Canvas


Render Components on the Canvas


Review Code


Export Code


Live Features

  1. Real-time live preview of your prototype including rendered components and styling.
  2. Prototype on multiple canvas sizes (e.g. iPad Pro and iPhone X).
  3. Code preview formatted and synchronized with the prototype render view.
  4. React-Bootstrap component integration.
  5. Export your prototype code to your Github account.
  6. Secure signup and login using Github OAuth.
  7. Installable progressive web application

How To Use


  1. Visit abstractreact.herokuapp.com
  2. Login with a GitHub account

Running local

  1. Clone this repo

    git clone https://github.com/oslabs-beta/Abstract.git
  2. Navigate to your local directory
  3. Install dependencies

    npm install
  4. Run the client (verify that localhost port 3000 is not being used)

    npm start


Abstract is an open-source product supported via the tech accelerator OS Labs/OS Labs-beta. We encourge all feedback and welcome all contributions. Note that this product does not have any full-time contributors. Expect that there will be a wait time before your pull request can be reviewed.


How to contribute

  1. Fork the repo and create a new feature branch from dev.
  2. Any changes to the code base should include unit and/or integration tests.
  3. Ensure your code follows proper formatting recommendations.
  4. Create a pull request to the dev branch.

New feature log

  1. Drag and drop feature from the component menu onto the canvas
  2. Refactor to TypeScript
  3. Support TypeScript exports
  4. Add support for additional component libraries (Material UI, Chakra UI, etc)


This project is licensed under the MIT License – see the LICENSE.md file for details.