
Security News
vlt Launches "reproduce": A New Tool Challenging the Limits of Package Provenance
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
design-system-sandbox
Advanced tools
design-system-sandbox
Design System Sandbox is an in-browser editor to prototype with design systems in React. Based on react-live
.
Once you install the sandbox, import your design system components and they will all be available in the in-browser editor.
• Prototyping layouts in JSX
• Pair-programming and trainings
• Build example snippets
Currently supports React components and JSX markup. Add code you would add inside a render()
method.
There are two ways to use the sandbox:
Run yarn add design-system-sandbox
Export your design system components into a scope
object to make them available for the editor, i.e.:
import Button from "my-design-system/core/Button";
import Card from "my-design-system/core/Card";
import Tabs from "my-design-system/core/Tabs";
const scope = {
Button,
Card,
Tabs
};
export { scope };
Editor
component into your application: import { Editor } from "design-system-sandbox"
scope
prop, and pass the editor placeholder code into the code
prop <Editor code={`<Button>Click me</Button>`} scope={scope} />
You can also define an HTML tag for your editor object with a tag
prop. Default is div
<Editor tag='main' code={`<Button>Click me</Button>`} scope={scope} />
Coming Soon 💁♀️
MIT © dfosco
FAQs
> design-system-sandbox
The npm package design-system-sandbox receives a total of 0 weekly downloads. As such, design-system-sandbox popularity was classified as not popular.
We found that design-system-sandbox demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.