question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Static template for pure HTML/CSS/JS

See original GitHub issue

Tell us how you think we can improve Sandpack

It would be wonderful to have a “static” template that skips all bundling, and renders the HTML/CSS/JS provided.

My usecase: some of my sandpacks are meant to show CSS things. I want to have an HTML file with a <style> tag, so that the user can see the result and poke at the CSS.

I tried to do something similar using the vanilla template, but it seems as though anything added to the <head> of the HTML doc is blown away by the bundler.

Here’s a codesandbox demonstrating the issue: https://codesandbox.io/s/vigorous-williams-fol3rg?file=/src/App.js

Packages affected

  • sandpack-client
  • sandpack-react

How would your idea work?

I imagine it could work like the “static” template on CodeSandbox.

Though, one issue: the “static” template on CodeSandbox doesn’t have any sort of hot reloading. You have to save the file to see the results. Sandpack doesn’t have a “save” mechanism, so maybe it could trigger the reload when the user stops typing, with a debounce?

Alternatively: maybe the vanilla template could be updated so that stuff in the <head> is preserved? I don’t mind using a more-sophisticated template, but right now it doesn’t seem possible.

Thanks y’all!

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:28
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

3reactions
yyildizcommented, Nov 16, 2022

Hey there! I just wanted to jump on the back of this discussion and see if @joshwcomeau or others have found a workaround for the time being? It would be pretty amazing to have this feature.

Keep up the amazing work on sandpack y’all, it’s great stuff!

Thanks!

3reactions
Ivluengocommented, Oct 17, 2022

HII! Is there any update in this matter?? I would love to use Sandpack also for teach some CSS to my students and as @joshwcomeau said,

I want them to see the result and poke at the CSS

Looking forward to it!

¡Thanks a lot!

Ivan

Read more comments on GitHub >

github_iconTop Results From Across the Web

Free Static Website Templates with CSS & HTML code export
Build responsive static websites within minutes with basic knowledge of HTML and CSS. Our static website templates are free, fast and responsive.
Read more >
Free Static HTML Website Templates - Designmodo
A big gallery of free static website templates with responsive layouts. To edit and download the static HTML template, simply drag it onto...
Read more >
99 Free HTML Templates You Can Download Right Now
This page describes the 99 best HTML templates that you can get for free. You don't need the overhead of a CMS to...
Read more >
576 HTML Website Templates with Static
Download 576+ ⭐ HTML website templates with static features on TemplateMonster. ᐉ They have clean code ᐉ Responsive design ᐉ created by international ......
Read more >
Static Website Templates for Personal and Startup - Geekflare
Easily create a static website template along with animations by using Slides. ... You can be sure Slides has clean code and is...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found