{"_id":"@_lunch/sketch-cli","name":"@_lunch/sketch-cli","dist-tags":{"latest":"0.0.2"},"versions":{"0.0.2":{"name":"@_lunch/sketch-cli","version":"0.0.2","description":"sketch-cli is a tool that helps create art with code.","main":"./index.js","bin":{"sketch":"index.js"},"type":"module","directories":{"doc":"docs","lib":"lib"},"scripts":{"test":"node --test"},"repository":{"type":"git","url":"git+https://github.com/bkcastro/sketch-cli.git"},"keywords":[],"author":{"name":"Brandon Castro"},"license":"ISC","bugs":{"url":"https://github.com/bkcastro/sketch-cli/issues"},"homepage":"https://github.com/bkcastro/sketch-cli#readme","dependencies":{"chalk":"^5.6.2","clear":"^0.1.0","figlet":"^1.11.0"},"gitHead":"0f3d09124a07e74582a2d63d4aa98026f0574ac8","_id":"@_lunch/sketch-cli@0.0.2","_nodeVersion":"22.18.0","_npmVersion":"11.17.0","dist":{"integrity":"sha512-DdHUO0F8aWpgRywsksPW3ZjXtBEfQJ817BQNksoq3u/3lQh4pGbbRqCz98lCHL1CG2b6U1TWVqrdiA8RI5YhjQ==","shasum":"39d291101a9d048d3e4d617886c9326b19799647","tarball":"https://registry.npmjs.org/@_lunch/sketch-cli/-/sketch-cli-0.0.2.tgz","fileCount":24,"unpackedSize":70772,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIEhEaJZbaTTo/WQJ3aaNme14E9SSJ8a9tiR2pFyQQUiZAiBLoxjRRGA8V+ZXb5aDdEyYRjQKBCdMbkLGo06lXxZELw=="}]},"_npmUser":{"name":"_lunch","email":"c1brandon626@gmail.com"},"maintainers":[{"name":"_lunch","email":"c1brandon626@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/sketch-cli_0.0.2_1783280316280_0.13359011601938264"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-05T19:38:36.148Z","0.0.2":"2026-07-05T19:38:36.476Z","modified":"2026-07-05T19:38:36.705Z"},"maintainers":[{"name":"_lunch","email":"c1brandon626@gmail.com"}],"description":"sketch-cli is a tool that helps create art with code.","homepage":"https://github.com/bkcastro/sketch-cli#readme","keywords":[],"repository":{"type":"git","url":"git+https://github.com/bkcastro/sketch-cli.git"},"author":{"name":"Brandon Castro"},"bugs":{"url":"https://github.com/bkcastro/sketch-cli/issues"},"license":"ISC","readme":"# sketch-cli\n\nA cli scaffolding tool that helps create art with code. \n\n## What is a sketch? \n\nA sketch is a simple idea that can be rendered with a bowser. This can be anything from generative art, UI/UX, images, 3D experiences, etc. It is up to the user to define what they wish to represent. \n\n## Getting started\n\nCreate a new directory, `cd` into it then run the command `sketch init` to initialize a **sketchbook**.\n\nA **sketchbook** is just a directory that holds sketches.\n\nA sketchbook with a couple sketches will look like this:\n\n```\nMy_Sketchbook/\n    0001/                       <-- First sketch ever created \n        sketch/                 <-- Source files of sketch 0001\n        0001/                   <-- First iteration of sketch 0001\n            sketch/             <-- Source files of sketch 0001/0001\n        0002/                   <-- Seconed iteration of sketch 0001\n            sketch/             <-- Source files of sketch 0001/0002\n            0001/               <-- First iteration of sketch 0001/0002\n                sketch/         <-- Source files of sketch 0001/0002/0001\n    0002/                       <-- Folder of sketch 0002 \n        sketch/                 <-- Source files of sketch 0002\n        0001/                   <-- First iteration of sketch 0002\n            sketch/             <-- Source files of sketch 0002/0001\n    ...\n```\n\n### First sketch\n\nThe command `sketch` creates two folders `0001/` and `0001/sketch/`. Folder `0001/sketch/` contains all the files needed to render a sketch, the default is just a blank web page.\n\n```\nMy_Sketchbook/\n    0001/\n        sketch/\n            index.html\n            script.js\n            style.css\n```\n\nUse any text editor and start hacking away. \n\nNote: All files and resources should be kept inside the `sketch/` folder.\n\n### Iterate\n\nThe flag `--iterate` or `-i` for short is used to iterate on the most recent sketch.\n\nRunning the command `sketch -i` produces this output:\n\n```\nMy_Sketchbook/\n    0001/\n        sketch/             <-- Source files copied\n            ...\n    0002/                   <-- Iteration just created\n        sketch/             <-- Exact copy of 0001/sketch \n            ...\n```\n\nThere is another way to iterate, which involves moving into folder `0001/` and running the same command producing this output: \n\n```\nMy_Sketchbook/\n    0001/\n        sketch/             <-- Source files copied\n            ...\n        0001/               <-- Iteration just created\n            sketch/         <-- Exact copy of 0001/sketch \n                ...\n```\n\nThis method allows the parent sketch to act as a container to all child sketches. Usually used to continue a **theme**, but experiment with different forms, color, behavior, etc...\n\nNote: Folders named `sketch/` cannot hold iterations or other folders named `sketch/`, these folders are essentially leaf nodes.\n\n## Templates \n\nTo start off a new sketch with a template use the flag `--template template_name` like so: `sketch --template 3D`.\n\nTo list all templates run the command `sketch templates`.\n\n## Server\n\n[sketchbook_demo_2.webm](https://github.com/user-attachments/assets/ce05dadb-9a61-4e3d-9f10-44bcfe700138)\n\nSketches can be viewed by running the command `sketch serve` in the root directory of a valid sketchbook.\n\nSketch has a built-in custom file server. This tool comes in handy when trying to come up with new ideas. To obtain a holistic view, open up different sketches and move them around the computer screen. Then sit back and channel the creative forces.\n\nThere are two modes available.\n\n### Reference\n\nReference mode is used to represent a sketchbook with a tree like data-structure.\n\n### Display \n\nDisplay mode is used to represent a sketchbook with thumbnail images found inside the folders named `sketch/` **if they exists**. It is up to the user to take a screenshot of their sketch and place it in the directory. Image files that match this regular expression will be used `/^thumbnail\\.[jpg|webp|png]{1}$/`. \n\n```\nMy_Sketchbook/\n    0001/\n        sketch/\n            index.html      \n            style.css\n            script.js\n            thumbnail.webp     <- Image used by the display server.\n        0001/\n            ...\n    0002/\n    ...\n```\n","readmeFilename":"README.md","_rev":"1-f81de0fa5fe792a26f1f3aa4774834b1"}