Also show rendered markup with code snippets

[blynx]

It might actually be more interesting in some situations to see the rendered markup than the code which generated it. Aiur should also be possible to show that. The proposed tabbed interface would help here, too.

Given:

' ' ' thymeleaf
<div th:replace="~{components/molecules/Complex.html :: Complex}"></div>
' ' '

One does not get a hint about the actual Markup here.

[moonglum]

I don't think that a different syntax (' instead of ) is the right solution here. aiur allows you to register new engines. So you could register a jsxand ajsx-preview` Syntax. The first one just pretty-prints JSX and that's it. The second one creates a preview component as you can see right now.

What do you think?

[blynx]

ah, please don't mind the ' ' ' syntax, that was just meant to prevent the code block from being rendered wrongly 😅

I rather think having everything at a glance would be nicer - if you need to use a different rendering engine to see different results you might need to duplicate your component code? (one for render, one for code preview!?)