Idea for docs: Add interactive examples or links to playground demos

[zaydek]

Describe the feature request

Somewhat related to #832.

I've been meaning to read the new recipes section but had a hard time following because the code didn't have easy-to-access live demos or playgrounds as references. But I can very easily generate a playground using a recipe as an input to an AI (such as ChatGPT) and get the code provided below.

I would love it if the documentation made heavy use of either embedding playgrounds or linking to playgrounds so that it's much easier to follow along and discover new patterns.

---

This was generated with AI. This is kind of what I was imagining I could see or be linked to when reading for example the Variants recipe.

View Code Example

import * as stylex from '@stylexjs/stylex';

const styles = stylex.create({
  base: {
    appearance: 'none',
    borderWidth: 0,
    borderRadius: 4,
    cursor: 'pointer',
  },
});

const colorVariants = stylex.create({
  primary: {
    backgroundColor: {
      default: 'blue',
      ':hover': 'darkblue',
    },
    color: 'white',
  },
  secondary: {
    backgroundColor: {
      default: 'gray',
      ':hover': 'darkgray',
    },
    color: 'white',
  },
});

const sizeVariants = stylex.create({
  small: {
    fontSize: '1rem',
    paddingBlock: 4,
    paddingInline: 8,
  },
  medium: {
    fontSize: '1.2rem',
    paddingBlock: 8,
    paddingInline: 16,
  },
  large: {
    fontSize: '1.5rem',
    paddingBlock: 12,
    paddingInline: 24,
  },
});

function Button({ color = 'primary', size = 'small', ...props }) {
  return (
    <button
      {...props}
      {...stylex.props(
        styles.base,
        colorVariants[color],
        sizeVariants[size],
        props.style
      )}
    >
      {props.children}
    </button>
  );
}

// Usage Example with all combinations
export default function App() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
      {/* Primary Buttons */}
      <h3>Primary Buttons</h3>
      <Button color="primary" size="small">Primary Small</Button>
      <Button color="primary" size="medium">Primary Medium</Button>
      <Button color="primary" size="large">Primary Large</Button>
      
      {/* Secondary Buttons */}
      <h3>Secondary Buttons</h3>
      <Button color="secondary" size="small">Secondary Small</Button>
      <Button color="secondary" size="medium">Secondary Medium</Button>
      <Button color="secondary" size="large">Secondary Large</Button>
    </div>
  );
}

[zaydek]

One nuance worth mentioning is that the docs use TypeScript (which is good) but it looks like the playground doesn't (yet?) support TS. It shouldn't be too hard to use a Babel plugin to strip types before compiling StyleX?

There's a good example here of how to do that: https://github.com/sullyo/prompt2ui/blob/333875ebfc68212e9d55d9ac430c8254dc75b5fd/src/components/artifacts/preview-screen.tsx#L114.

[nmn]

The playground supports Typescript syntax but doesn't have type-checking yet. Help welcome to fix this.

[zaydek]

The playground supports Typescript syntax but doesn't have type-checking yet. Help welcome to fix this.

I did something like this which led me to believe TS doesn't work.

Happens with and without the semi-colon; type Foo = {};.

Not sure if the reason is that the file suffix being used is jsx (apparent in the error).

[nmn]

Maybe I remembered wrong and we switched to JS at some point.