Documentation Playgrounds With Module Imports Support

Andrey Grandilevskiy

View at original site

It is impossible to develop the UI-library on React and its documentation without usage examples with source code. Even better if this code can be changed in-place and look at the component in the different situations - change the values, props, the surrounding layout. And it looks easy - there are ready-to-use libraries for such playgrounds. But the difficulties arise when the examples should support the imports of external dependencies. In this talk, we’ll explain how we implemented the live code-sandboxes inside markdown content with supporting imports for our new RescUI library.


  • 00:00 Introduction
  • 05:05 Plan overview
  • 06:10 Parsing Markdown and examples
  • 07:12 Extracting dependencies
  • 09:31 Resolving dependencies
  • 12:38 Frontend part
  • 13:08 Demo
  • 15:46 Brief summary
  • 16:33 Limitations
  • 17:05 Conclusion

About the Presenter

Andrey Grandilevskiy, Frontend Developer at JetBrains

Related Resources

Create Conditional Breakpoints
Add a condition to a breakpoint when debugging.
Debug Like a Pro: JavaScript Edition
Reach for the debugger first when learning about code, poking around, or fixing problems.
Grammar Checking with Grazie
Use Grazie to check grammar in regular text.