What notation is used in the styled-components documentation?

In the documentation of styled-components you commonly see the following notation used in examples

const Button = styled.button`
  color: palevioletred
`;

render(
    <Button>Click me</Button>
);

JSX being passed as a parameter to render really threw me off when I was starting to learn styled-components. Is this some kind of alternative notation in React, that I somehow missed? Is it meant as pseudo code shorthand for the return value of React's render function? Is it some kind of DSL that can be used with styled-components?

Solution

The styled-components web page uses React Live to render demo components, so that render() is a specific imperative form enabled by React Live and is not directly related with styled-components.

That being said, there's nothing special in passing JSX to a render() function: you usually do that with ReactDOM.render(). JSX compiles into React.createElement(), so what you're actually passing to the function is a React element.