Flow to Vanilla JavaScript — Numio

When to use it

• You are removing Flow from a project and want the plain JavaScript first, before deciding whether to move to TypeScript.
• You need to paste a Flow-typed snippet into a place that only accepts standard JavaScript, such as a browser console or a codepen.

How to use

1. Paste Flow-annotated code (with or without the // @flow header) into the Flow panel.
2. The code is posted to /api/flow-to-javascript, where recast parses it with the Flow parser and Babel removes the types.
3. Copy the JavaScript from the output panel.

// @flow
import type { Store } from './store';
import { createStore } from './store';

type State = { count: number };

export function first<T>(items: Array<T>): ?T {
  return items.length ? items[0] : null;
}

const store: Store<State> = createStore(({ count: 0 }: State));

export default store;

import { createStore } from "./store"

export function first(items) {
  return items.length ? items[0] : null
}

const store = createStore({
  count: 0,
})

export default store

Details and limitations

The page sends your input to a server route (/api/flow-to-javascript) for conversion; it is not processed only in the browser. Next.js API routes accept request bodies up to 1 MB by default.

Only types are removed. Modern syntax such as JSX, ?? or class fields is not transpiled.

The result is reformatted with Prettier (double quotes, no semicolons), so the original style is not kept, and a type cast such as ({ count: 0 }: State) loses its extra parentheses.

A // @flow comment attached to a removed type declaration is removed with it.

FAQ

Related tools

Specifications and references

• @babel/plugin-transform-flow-strip-types