CodesBeautify

MXML Viewer

Open an Adobe Flex MXML file, indent it properly, or flip to a component outline that shows ids and labels at a glance.

MXML
Result
Runs locally in your browser

About the MXML Viewer

MXML files pile up quickly in a legacy Flex codebase, and most of them arrive as one enormous line because a build step stripped the whitespace. This viewer parses the markup with the browser XML engine, so a missing closing tag or a stray ampersand is reported with a line number instead of silently mangling the layout. Namespace prefixes such as s:, mx: and fx: are preserved exactly, since renaming them would break the component resolution rules that Flex applies at compile time.

The Component outline mode is the reason most people open this page. It walks the tag tree and prints one indented line per component, pulling out the id, label, title, text and source attributes when they exist, then lists the namespace declarations from the root element underneath. That gives you a map of a screen you have never seen before in a few seconds, which is far quicker than scrolling through a thousand lines of nested containers.

Everything happens on this page, so proprietary internal screens never leave the machine. Because MXML is XML underneath, the general purpose pages still apply once you are done here: run XML Validator to double check well formedness, or XML to JSON if you want the tag tree as data for a migration script.

How to use

  1. Paste the contents of an .mxml file, or upload it with the Upload button.
  2. Leave Show on Formatted markup for a properly indented version you can read.
  3. Switch to Component outline to see the nesting, ids and labels without the attribute noise.
  4. Copy the result, or download it back as an .mxml file.

Common questions

Does this compile or render the Flex component?
No. It parses and displays the markup only. Rendering would need the Flash runtime, which browsers no longer ship.
Are the namespace prefixes rewritten?
Never. The prefixes and their xmlns declarations are copied through unchanged, because Flex resolves component classes through them.
What happens with binding expressions in curly braces?
They sit inside attribute values, so they are treated as ordinary text and survive formatting untouched.
Why does the outline show fewer lines than my file?
The outline lists elements only. Comments, processing instructions and text content are left out on purpose.