Idea for docs: Add interactive examples or links to playground demos #833
Open
Description
Describe the feature request
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>
);
}