Mr. Potato Bruce Stylable demo for React Europe 2018 conference
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
public changed to licensed potato, assets, minor fixes May 3, 2018
src Upgrade Stylable to new scoped package Aug 8, 2018
.gitignore init Apr 17, 2018
CNAME homepage related changes Apr 24, 2018 amsterdam tweaks Jun 11, 2018
tsconfig.json Upgrade Stylable to new scoped package Aug 8, 2018
yarn.lock Upgrade Stylable to new scoped package Aug 8, 2018

Mr. Potato Bruce

Mr. Potato Bruce (MPB) is a demo application showcasing the features and typed style API of Stylable. You can see the working demo here.

It is a full demo so you can play with the features and use the API.


MPB has several components simulating the structure of a simple web application. These components are composed of a TypeScript file with the component's logic, and the Stylable .st.css file.

 ├── app.tsx
 ├── nav-bar
 |  ├── nav-bar.tsx
 |  └──
 └── potato
    ├── potato.tsx
    ├── eyes
    |  ├── eyes.tsx
    |  └──
    └── mouth
       ├── mouth.tsx


The App component is the root level of our application. It's the only component that manages the state for the entire application.

In this demo we used the App component to compose both the nav-bar and potato components, and to apply our overrides to their styling.


The nav-bar component functions as the menu for the application and is located on the top of the rendered page. This menu is where users can select between various pre-defined styles and customizations.

For the purposes of the demo, we have full control over the nav-bar's API. It was created specifically to be the menu for this application and serves no other, generic purpose. Stylable components typically are generic and stored in accessible libraries so they could potentially be reused in other applications.

We are able to tailor the 'nav-bar' component, exposing the various internal parts and behaviors to match the rest of our application.

Note: We chose to customize most of this component's styling from our stylesheet, creating one location to specify our entire application look and feel.


The 'potato' is the main graphical element in our application. You can select between its various states.

The 'potato' component illustrates a use case in which we have a Stylable component with an API that this application does not control. This can simulate a component coming from a UI Library, another team in the company, or a 3rd party source (e.g. NPM).

Although we don't have complete control over this component's API (props), its Stylable stylesheet exposes a typed interface declaring its internal parts and states. This enables us to customize it externally, ensuring that any actions we take for this application's component's states, internal parts or look and feel are both valid and don't change the component itself.

Installing the project

  1. Clone the repo.
  2. Run yarn install.

Running the project

  1. Run yarn start.
  2. If the browser doesn't automatically open to localhost:3000/, open it.