How can I make preview feature only for HTML and CSS?

[donghhan]

I can see preview feature is only workable for React's component-wise. Is there anyway I can make preview feature for HTML and CSS? Or maybe sometimes JS only?

[pomber]

You can use the <CH.Preview> component, it's not documented yet. But you can use any component inside

<CH.Preview>
  <h1>Lorem ipsum</h1>
</CH.Preview>

Or use an URL: <CH.Preview show="/some/url" />

[donghhan]

@pomber In the component that you just used <CH.Preview show="/some/url" />, prop show indicates the codesandbox preset repository? As there is no documentation on this, I still have no clue how to use with it.

[pomber]

The show prop is any url, it works like an iframe (well, it is an iframe).

What are you trying to do?

Is there anyway I can make preview feature for HTML and CSS? Or maybe sometimes JS only?

With the Scrollycoding preset prop you can use most codesandboxes as a template. You can use the Vanilla template from codesandbox for example.

[donghhan]

I am trying to show readers step-by-step tutorial with the CSS & JavaScript effect instead of just throwing them whole code and make them cook by themselves.

I tried what you suggested <CH.Preview> but it seems it does not show up on the format.

---
title: How to make Glitch effect with CSS and JavaScript
full: true
---

<iframe 
  src="https://codesandbox.io/embed/glitching-effect-text-tkxu1z?autoresize=1&fontsize=14&hidenavigation=1&theme=dark"
  style={{
    width: '100%',
    height: '50%',
    border: 0,
    overflow: 'hidden',
    background: 'rgb(21, 21, 21)'
  }}
  title="glitching-effect-text"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
/>

<CH.Preview show="https://codesandbox.io/s/glitching-effect-text-tkxu1z" />

## References

1. <a href="https://velog.io/@yunsungyang-omc/HTML-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%86%8D%EC%84%B1-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-data-attribute" target="_blank">(HTML) 데이터 속성 사용하기 (data attribute)</a>

Below is an image

[fedono]

@pomber could we use React Component in <CH.Preview> like below, and <CreateForm /> will be render

the ./Form.tsx file required at the current project

<CH.Preview frameless>
const CreateForm = require("./Form");
<CreateForm />
</CH.Preview>

[pomber]

@pomber could we use React Component in <CH.Preview> like below, and <CreateForm /> will be render

Yes, if the framework you are using allows it. See mdx docs on how to import. But it's basically this:

import CreateForm from './Form' 

...

<CH.Preview frameless>
  <CreateForm />
</CH.Preview>

[fedono]

@pomber Thanks, This project helps me a lot.

[RobbieTheWagner]

@pomber so is CH.Preview supposed to both show the code and render an example? It does not seem to show anything for me.

[pomber]

@pomber so is CH.Preview supposed to both show the code and render an example? It does not seem to show anything for me.

can you provide an example? https://play.codehike.org/

[RobbieTheWagner]

@pomber so is CH.Preview supposed to both show the code and render an example? It does not seem to show anything for me.

can you provide an example? https://play.codehike.org/

Try out what you suggested above:

<CH.Preview>
  <h1>Lorem ipsum</h1>
</CH.Preview>

It renders an empty section with a button to click to go view the example I guess. I'm trying to have the code displayed and have an example of the code running, without needing to duplicate the code twice. Unsure if that is what CH.Preview is for or not?

[pomber]

it needs some height if you want to render the mini-brower view:

<CH.Preview style={{height: 200}}>
  <h1>Lorem ipsum</h1>
</CH.Preview>

[RobbieTheWagner]

it needs some height if you want to render the mini-brower view:

<CH.Preview style={{height: 200}}>
  <h1>Lorem ipsum</h1>
</CH.Preview>

Oh I see! Thank you. Is there a way to display both the code and the preview? I would like people to be able to see the code and what it is rendered as, without needing to duplicate the code.