When using Mosaic in a client side application you must import and inject the css styles. We recommend that you do this once towards the top of your application. Calling injectStyles more than once results in a no-op so that styles are not duplicated by accident.

// your application, somewhere early in the rendering

import { injectStyles } from '@stoplight/mosaic';
import React from 'react';
import ReactDOM from 'react-dom';

// this injects a style tag into the head of your document, with the mosaic css
injectStyles();

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root'),
);

SSR

If your application supports server side rendering, we recommend that you inject the style tag on the server to avoid a flash of content on page load. You should not need to use the client side loading method above if you include the style tag in SSR. If you do this by accident Mosaic will detect the existing style tag and not duplicate styles on the client.

// your application, somewhere early in the rendering

import { InlineStyles as MosaicInlineStyles } from '@stoplight/mosaic';
import React from 'react';
import ReactDOM from 'react-dom';

yourServer.handler(res => {
  const markup = ReactDOM.renderToString(
    <html>
      <head>
        <InlineStyles />
      </head>

      <body>
        <div id="root"></div>
      </body>
    </html>,
  );

  return res.send(markup);
});

2. Use it

Once the CSS is taken care of, you can just import and use Mosaic components. No context providers or wrapping components required.

import { Box, Button } from '@stoplight/mosaic';

const MyComponent = () => {
  return (
    <Box>
      <Button appearance="primary" onClick={() => alert('hello')}>
        Click Me
      </Button>
    </Box>
  );
};

Currently there are 4 packages managed in this repository:

@stoplight/mosaic: The core components - think button, input, panel, etc.
@stoplight/mosaic-code-viewer: Read only code viewer component.
@stoplight/mosaic-code-editor: Simple code editor component.
@stoplight/mosaic-live-code: Code editor component with react live for previewing.

Playground

Visit http://localhost:4200 after starting. Most of the components in the left sidebar are semi-transparent - these are placeholders for future work.

See the Try It article in the playground for a pretty comprehensive example.

# In terminal 1
yarn start playground

# In terminal 2
yarn start playground-api

Building

All libraries: yarn build:libs

Specific lib: yarn build core --prod --with-deps

Built apps and libs are put in the dist folder.

Bundle Size

Bundle size is important. Run yarn size-limit after yarn build:libs to check end user bundle size for the libraries. Run yarn size-limit --why to open webpack visualizer for the libraries.

Important Files

libs/core/src/componets/Icon/index.ts: The icons that are bundled with the library. Other icons can be used by loading font awesome in the consuming application
libs/core/src/theme.css: Css variables for the built in themes (light, dark)
libs/core/tailwind.config.js: Primary tailwind config, important!
libs/core/src/utils/*: Utility functions that translate react props -> tailwind classes

Generating

See NX_README.md for more details on nx commands.

New Library

Change --importPath to the appropriate package name.

yarn nx g @nrwl/react:library --publishable --importPath @stoplight/mosaic --buildable

New App

Change the final argument to the appropriate app name.

yarn nx generate @nrwl/express:application playground-api

FAQs

What is @stoplight/mosaic-code-editor?

Is @stoplight/mosaic-code-editor popular?

Is @stoplight/mosaic-code-editor well maintained?

Package last updated on 17 Nov 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install