XML to PropTypes Converter – React PropTypes from XML Data

How to use the XML to JavaScript PropTypes

Paste your XML document into the Input editor, or use Sample, Upload file or Load URL, or press Sample to see an example.

Leave Top-level class name empty to name the root type after the root element, or type your own name.

The Types only option does not change PropTypes output.

Press Generate (it also updates as you edit), then use Copy or Download.

XML to PropTypes for components that render XML data

React apps sometimes display data that starts life as XML: blog RSS feeds, podcast feeds, sitemaps or responses from older services. After you convert that XML to objects, PropTypes can check at development time that each component receives the fields it expects. This XML to PropTypes generator builds the PropTypes.shape definitions from a sample document.

Example: an RSS 2.0 feed

<rss version="2.0">
  <channel>
    <title>Dev Blog</title>
    <item><title>Hello</title><link>https://example.com/hello</link><pubDate>Mon, 01 Jun 2026 10:00:00 GMT</pubDate></item>
    <item><title>World</title><link>https://example.com/world</link><pubDate>Tue, 02 Jun 2026 10:00:00 GMT</pubDate></item>
  </channel>
</rss>

_Item = PropTypes.shape({
    "title": PropTypes.string,
    "link": PropTypes.string,
    "pubDate": PropTypes.string,
});
_Channel = PropTypes.shape({
    "title": PropTypes.string,
    "item": PropTypes.arrayOf(_Item),
});
_RSS = PropTypes.shape({
    "channel": _Channel,
    "version": PropTypes.number,
});
export const RSS = _RSS;

Look at version: the attribute "2.0" was parsed as the number 2, so it is typed PropTypes.number. Version strings, ZIP codes and IDs are text in XML; if your parser keeps them as strings, change the validator to PropTypes.string. RSS dates use the RFC 822 format, which is not ISO 8601, so pubDate stays a string.

Using the shapes

FeedList.propTypes = {
    channel: PropTypes.shape({
        title: PropTypes.string.isRequired,
        item: PropTypes.arrayOf(ItemShape).isRequired,
    }).isRequired,
};

Convert the XML in a data-loading step, for example with fast-xml-parser on the server or DOMParser in the browser, and pass plain objects to your components. Make sure repeating elements such as <item> are always arrays, even when a feed contains a single item, or arrayOf will warn.

Development checks vs. production validation

PropTypes warnings appear only in development builds, so they help you notice when a feed's structure differs from what a component expects, but they do not protect users in production. If the XML comes from a third party, validate or normalize it where you parse it: default missing titles, drop items without links, and convert dates once. The component then receives clean data, and the PropTypes document the contract for other developers.

How the XML is mapped

Attributes and child elements become keys of the same shape, the text of an element with attributes becomes value, namespace prefixes such as dc: or content: are removed, and the root element (<rss>) names the exported shape.

Preview a feed's structure with the RSS Viewer or convert it with RSS to JSON. For TypeScript projects, XML to TypeScript generates interfaces instead. Generation runs in your browser.

Frequently asked questions

Why is the RSS version typed as a number?

The generator parses numeric-looking text, so "2.0" becomes 2. If your XML parser keeps it as text, change the validator to PropTypes.string.

Can PropTypes validate XML directly?

No. Convert the XML to JavaScript objects first; PropTypes then checks the props your components receive.

Why are my feed items not an array?

A feed with one item parses as a single object unless you tell your XML parser that item always repeats, for example with fast-xml-parser’s isArray option.

What happens to namespaced elements like dc:creator?

The namespace prefix is removed, so dc:creator becomes a creator key.

Do PropTypes still work in React 19?

No. React 19 stopped checking propTypes on components, so the shapes no longer produce warnings when attached to a component. You can still validate data yourself with PropTypes.checkPropTypes(), but for new projects TypeScript types, for example from XML to TypeScript, are the recommended way to describe feed data.

Can I validate parsed XML with the shapes outside a component?

Yes. Call PropTypes.checkPropTypes({ feed: RSS }, { feed: parsedObject }, "prop", "FeedLoader") after parsing. It logs a warning in development builds when the structure does not match, which is useful in a data-loading function or a test.