YAML to Flow
Turn any YAML document into ready-to-use Flow type definitions in your browser.
Example
Input YAML:
name: Ada
age: 36
tags:
- admin
- user
Output Flow types:
// @flow
export type Root = {|
name: string,
age: number,
tags: Array<string>,
|};How it works
Paste YAML on the left; the tool parses it with js-yaml, infers a type model, and emits Flow types named from your keys. Nested objects become their own types and arrays are unioned across elements.
Good to know
YAML to Flow takes a YAML document and generates Flow type definitions from it, so you can paste a config file, fixture, or API sample and get a typed shape back without writing the annotations by hand. It is aimed at developers maintaining a Flow-typed JavaScript codebase who keep their data in YAML — CI configs, service manifests, seed data, or response stubs — and want a starting point for typing functions that consume that data.
Reach for it whenever you are introducing a new YAML-backed object into typed code and want the structure captured accurately the first time. Because the tool infers from a concrete example rather than a schema, the quality of the output depends entirely on how representative your sample is: include every optional key and at least one populated value for each field, and feed it an array element that exercises the full shape rather than a trimmed-down one.
To read the result, note these conventions the generator uses:
- The top-level type is always named
Root, and nested objects get type names derived from their key (singularized for array elements). {| ... |} marks an exact object type, meaning no extra keys are allowed; a trailing ? on a key name (e.g. archived?:) means the key was absent from some array elements, while a leading ? on a type (e.g. ?string) is a maybe type from a null value.
One caveat: numbers and strings are inferred from the literal value, so a ZIP code written as a bare 00000 becomes number while a quoted "00000" stays string. If your YAML mixes types in a list or leaves fields empty, expect unions or mixed, and treat the output as a draft you refine — rename the generic Root and element types, and tighten anything the sample could not fully determine.
Frequently asked questions
How does it handle arrays of objects?
It merges every object in the array into one shape, marks keys missing from some elements as optional, and emits a single named element type used as Array.
What about null values and exact object types?
Null-valued keys become maybe types (e.g. ?string when other items have strings, or null when always null), and objects use Flow exact syntax {| ... |} for stricter checking.
Is my data uploaded anywhere?
No — this tool runs entirely in your browser. Your input never leaves your device and it works offline once loaded.
Is it free?
Yes, completely free with no sign-up and no limits.
People also ask
What is Flow and how is it different from TypeScript?
Flow is a static type checker for JavaScript developed by Meta that adds type annotations via comments or syntax stripped at build time. Unlike TypeScript, it is a checker layered onto plain JavaScript rather than a separate language with its own compiler, though both serve the same goal of catching type errors before runtime.
What does the // @flow comment at the top of the output do?
The // @flow pragma tells the Flow checker to type-check that file. Files without it are ignored by Flow unless you enable all=true in your configuration, so the generated comment ensures the type definitions are actually checked when you paste them into a project.
What is the difference between {| |} and { } in Flow types?
{| |} denotes an exact object type that permits only the listed keys, while { } denotes an inexact object that allows additional unlisted properties. The tool emits exact types so the generated shape matches your YAML precisely.
How do I type an optional property in Flow?
A key followed by a question mark, such as name?: string, means the property may be omitted entirely. A maybe type written as ?string means the value can be the type, null, or undefined. These are distinct, and the tool uses key? for missing keys and ?Type for null values.
Can I convert YAML to Flow without an internet connection?
Yes. The tool runs entirely in the browser and works offline once the page and its YAML parser have loaded, since no data is sent to a server.
Why did a numeric-looking value in my YAML become a number type?
YAML interprets unquoted values by type, so 36 or 00000 is parsed as a number. Wrap the value in quotes in your YAML (for example "00000") if it should be treated as a string, and the generated type will reflect that.
Does this tool support YAML anchors, aliases, and multiple documents?
It parses input with the js-yaml library, which resolves anchors and aliases into their referenced values before types are inferred. The tool converts a single document; the inferred types reflect the fully expanded data rather than the anchor syntax itself.
Is Flow still maintained for new projects?
Flow is still developed and used internally at Meta, but much of the broader JavaScript ecosystem has shifted toward TypeScript. Teams already on Flow continue to use it, while many new projects choose TypeScript for its larger tooling and community support.
Related tools