React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

HTML

<script src="https://unpkg.com/blossom-js@0.40.2/umd/index.js"></script>
<script src="https://unpkg.com/electron-css@0.3.6/index.js"></script>

<e-test>
    <!-- This element's contents will be replaced with your component. -->
</e-test>

<!-- Please `RUN` the example -->

Babel + JSX

// Please `RUN` the example

const wrapper = CSS({
  border: '1px solid black',
  height: '150px',
  width: '150px',
  onHover: {
    borderColor: 'pink'
  }
});

const tester = CSS({
  fontSize: '150%',
  [wrapper.onHover]: {
    color: 'pink'
  }
});
        
class MyComp extends Blossom.Component {
    render() {
      return `<div class="${wrapper}"">
        <div class="${tester}">
          Hello World !
        </div>
      </div>`;
    }
}

Blossom.register({
	name: 'e-test',
  element: MyComp
})