YAML to Flow
Turn any YAML document into ready-to-use Flow type definitions in your browser.
Reviewed by the CalcCafe editorial team · Last updated 1 July 2026 · How we test our tools
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.
How do I create a .yaml file?
Open any text editor, write your key: value pairs using spaces (not tabs) for indentation, and save the file with a .yaml or .yml extension. A minimal file might contain name: Ada, then age: 36, then tags: followed by indented lines beginning with a dash for each list item, exactly like the input example on this page. Nothing else is required; YAML has no mandatory header, though a --- line may optionally mark the start of a document.
How do I open a .yaml file?
Open it in any text editor, since a YAML file is plain text; VS Code, Sublime Text, Notepad++, and even Notepad or TextEdit all work, and a YAML extension adds syntax highlighting and validation. To use the data rather than just view it, a program parses it with a YAML library, such as js-yaml in JavaScript, which is what this tool runs in your browser.
Is YAML just JSON?
Not quite, but they are close relatives: YAML 1.2 is a superset of JSON, so any valid JSON document is also valid YAML and can be pasted into this tool unchanged. The reverse is not true; YAML adds comments, indentation-based structure, unquoted strings, multi-line block scalars, anchors and aliases, and multiple documents in one file, none of which JSON allows. Both parse to the same kinds of values (maps, lists, strings, numbers, booleans, null), which is why the Flow types generated here would be identical for equivalent JSON.
What coding language is YAML?
YAML is not a coding language; it is a data serialization format, and the name is a recursive acronym for YAML Ain't Markup Language. It describes data (maps, lists, scalars) rather than instructions, and programs in any language read it through a library such as js-yaml for JavaScript, PyYAML for Python, or serde_yaml for Rust. The Flow types this page produces describe the shape of that data so a JavaScript program can use it safely.
Is YAML easy to learn?
The basics take minutes: key: value pairs, indentation for nesting, and a dash for each list item cover most config files. The tricky parts are the details: indentation must use spaces and stay consistent, unquoted values are type-guessed (1.0 becomes a number and true becomes a boolean, and older YAML 1.1 parsers also turn yes, no, on, and off into booleans, although the YAML 1.2 parser this tool uses keeps them as strings), and anchors, block scalar indicators (| and >), and multi-document files have their own rules. Quoting any string that could be mistaken for another type avoids most surprises.
Related calculators
Sources & references
These tools follow our methodology and provide educational estimates only — verify important figures with a qualified professional.