Raw HTML & CSS

This is for features that are not yet implemented in jsUI, but also for custom HTML components, very specific CSS properties, etc.

Raw CSS

If you need to drill in further and apply your own raw CSS to the page, use the addCSS() function.

import {addCSS} from 'javascript-ui';

addCSS({
    'selector': {
        'property': 'value'
    }
});

You can also apply custom CSS properties to elements using the property() method.

Element()
    .property('property','value')

Custom HTML

If you need to render a custom HTML tag, use the Tag() component. It takes a valid HTML tag as its argument. To apply custom attributes to the element, use the .attribute() method.

Tag('div')
    .attribute('attribute', 'value')

Raw HTML

!!! Warning: Never use these to render user-generated content. This creates a risk of cross-site scripting (XSS) attacks. !!!

If you really need to type in some raw HTML, since many elements like Paragraph(), Text(), etc. will render HTML as text, you can use the HTML() component and the generic .html() method on any component or element.

The HTML() component renders the HTML string in place, it will not be nested in a </div> or </span> wrapper.

import {view, HTML} from 'javascript-ui';

view([
    // ...
    HTML('<p style="text-color: red">Hello, World!</p>')
    //...
]);

The .html() method sets the innerHTML of the element or a component's main element.

view([
    // ...
    Div()
        .html('<p style="text-color: red">Hello, World!</p>');
    //...
]);