How to properly use a locally hosted Code Sandbox library?

  • I need to use code sandbox editable examples, something similar to Codepen embeds but hosted on my site. I have in my mind two:

    1. Google Playgrounds https://github.com/google/playground-elements
    2. Sandpack https://github.com/codesandbox/sandpack

    But I’m not sure how to use them considering also that in the second there’s a react based and WordPress is using react. Also if there’s another library or WordPress Plugin that does what I’m looking for would be great. Do note for the time being I need a live preview, html tab and css tab.

    Any guidance here is appreciated ??

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hello @snippet24,

    Given that WordPress uses React (especially in the Gutenberg editor), integrating a React-based solution might be a smoother experience for you. Here’s a simple guide to help you set up Sandpack on your WordPress site:

    1. Include Sandpack Dependencies: You need to enqueue the Sandpack scripts and styles in your theme’s functions.php file:
       function load_sandpack() {
       wp_enqueue_script('sandpack-bundler', 'PATH_TO_SANDPACK_BUNDLER.js', array(), null, true);
       wp_enqueue_style('sandpack-styles', 'PATH_TO_SANDPACK_STYLES.css');
   }
   add_action('wp_enqueue_scripts', 'load_sandpack');

    Replace PATH_TO_SANDPACK_BUNDLER.js and PATH_TO_SANDPACK_STYLES.css with the correct paths.

    1. Use Sandpack in Your Posts/Pages: Depending on how you’re setting things up, you can directly integrate Sandpack components into your posts or pages. This might involve creating a custom Gutenberg block, shortcodes, or even custom templates that incorporate Sandpack components.
    2. React Compatibility: Since WordPress’s Gutenberg editor uses React, there should not be significant issues integrating Sandpack. However, remember that mixing different versions of React can cause compatibility problems. Ensure that Sandpack’s React version matches or is compatible with the WordPress version you’re using.
    3. Alternative Plugins: While I’m unaware of a dedicated WordPress plugin that offers exact functionality, there are plugins like “WP Code Highlight.js” and “SyntaxHighlighter Evolved” that can help showcase code snippets, albeit without live previews.
    4. Custom Development: If integrating Google Playgrounds or Sandpack proves too challenging or doesn’t give the exact results you want, consider developing a custom WordPress plugin or hiring a developer to do so. This way, you can get tailored results and seamlessly integrate them into your WordPress site.

    Good luck!

    Donny M
    Director of Web X Electrical
    https://www.localperthelectrician.com.au/

    Thread Starter snippet24

    (@snippet24)

    Thank you so much, oh I thought i needed to use ['wp-element']

    • This reply was modified 1 year, 5 months ago by snippet24.
    • This reply was modified 1 year, 5 months ago by snippet24.
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to properly use a locally hosted Code Sandbox library?’ is closed to new replies.