feat(cli): `sv create --from-playground` #662

manuel3108 · 2025-08-03T16:54:46Z

Closes #602

You can now run pnpx https://pkg.pr.new/sveltejs/cli/sv@662 create --from-playground=https://svelte.dev/playground/hello-world. This is currently doing more or less the same the stuff the Download App button in the playground is doing. Apart from that, you can choose additional addons, ts vs js and install deps. External dependencies are auto-detected and installed into the package.json

Todos:

more (manual) testing
consider if we should prompt the user before installing external dependencies on the local computer
handle svelte-?version= parameter from the playground url
Feedback from dominikg: one thing to remember is that this is untrusted input basically, the playground could reference malicious packages, so installation with --ignore-scripts and making users aware that they have to check the content beforehand would be good.

changeset-bot · 2025-08-03T16:54:49Z

🦋 Changeset detected

Latest commit: 1eabc91

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
sv	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

pkg-pr-new · 2025-08-03T16:55:10Z

Open in StackBlitz

npx https://pkg.pr.new/sveltejs/cli/sv@662

npx https://pkg.pr.new/sveltejs/cli/svelte-migrate@662

commit: 1eabc91

svelte-docs-bot · 2025-08-03T16:55:13Z

Preview: https://svelte-dev-git-preview-cli-662-svelte.vercel.app/

jycouet · 2025-08-03T17:43:17Z

This is exciting 🤩

I have this one that could show a few things: https://svelte.dev/playground/770bbef086034b9f8e337bab57efe8d8

App.svelte => /src/routes/+page.svelte
Footer.svelte => /src/routes/Footer.svelte easy like this, all imports are still working.
import * as changeCase from "change-case"; => Need to add this in package.json
Maybe the main layout can be tuned to have a "Playground" style with a link to the playground.

+layout.svelte example

<script lang="ts">
	import favicon from '$lib/assets/favicon.svg';
let { children } = $props();

</script>
svelte:head



</svelte:head>

	
		
			
				
			
			Playground
		
		
			
				Cases ↗
			
		
	
<main class="content">
	{@render children?.()}
</main>


<style>
	:global(body) {
		margin: 0;
	}

	.layout {
		min-height: 100vh;
		background-color: #1c1e22;
	}

	.navbar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 1rem 2rem;
		background-color: #23272f;
		border-bottom: 1px solid #2d3139;
	}

	.nav-left {
		display: flex;
		align-items: center;
		gap: 1rem;
	}

	.svelte-icon {
		display: flex;
		align-items: center;
		text-decoration: none;
		transition: opacity 0.2s ease;
	}

	.svelte-icon:hover {
		opacity: 0.8;
	}

	.title {
		color: #ffffff;
		font-size: 1.5rem;
		font-weight: 600;
		margin: 0;
	}

	.nav-right {
		display: flex;
		align-items: center;
	}

	.playground-link {
		color: #ffffff;
		text-decoration: none;
		font-weight: 500;
		padding: 0.5rem 1rem;
		border-radius: 0.375rem;
		transition: background-color 0.2s ease;
	}

	.playground-link:hover {
		background-color: #2d3139;
	}

	.content {
		padding: 2rem;
		color: #ffffff;
	}
</style>

manuel3108 · 2025-08-15T16:59:29Z

I have this one that could show a few things: https://svelte.dev/playground/770bbef086034b9f8e337bab57efe8d8

This is perfect, and i was able to get it fully working from the tests.
The only thing remaining here is code optimization and making it work from the core cli, instead from the crete tests.

Maybe the main layout can be tuned to have a "Playground" style with a link to the playground.

Not sure, I'm a fan of this. The current "download app" button does nothing like this. Also, I'm not sure if this provides any additional value to the user, or just causes styling problems because of the added css. We can always add this later if users want this.

jycouet · 2025-08-15T21:01:59Z

Great progress 🚀🚀🚀 Nice

Maybe the main layout can be tuned to have a "Playground" style with a link to the playground.

Not sure, I'm a fan of this. The current "download app" button does nothing like this. Also, I'm not sure if this provides any additional value to the user, or just causes styling problems because of the added css. We can always add this later if users want this.

The cool thing about a layout like this is that:

You can have a link back to the playground. so you know where it's coming from.
with css per component, it should not affect anything
you can escape from it by just deleting one file
we can feel that we are "home" in our playgound... locally (with similar style)

Yes, I love this idea 😜
But it can come later too with a flag in or out ;)

Anyhow, very nice job

manuel3108 · 2025-08-16T05:49:23Z

Updated pr description, this is working now. Let me know what you think.

jycouet

The result is like this:

Comments in random order:

I find it strange to have the "Template content" coming from a playground. Maybe +page.svelte should have ONLY <App />, nothing else ?
I still like the playground layout idea :p
Maybe a default folder name could be proposed "svelte-playground-slug-name-of-playgound" ?
Maybe the readme.md could mention the origin of the playground ?
If some extra deps are needed, prompt it in CLI and add it to readme.md ?

It's probably nitpicking, because it's working well already.
Great work 🎉🎉🎉

packages/create/playground.ts

Copilot

Pull Request Overview

This PR adds functionality to create SvelteKit projects from Svelte playground URLs using the --from-playground flag. Users can now run sv create --from-playground=<url> to generate a project based on playground code with automatic dependency detection and installation.

Key changes:

Added playground URL validation and parsing functionality
Implemented automatic detection and installation of external dependencies
Created comprehensive test suite for playground functionality

Reviewed Changes

Copilot reviewed 6 out of 7 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
rolldown.config.js	Added playground.ts to the build inputs for the create package
packages/create/test/playground.ts	Added comprehensive tests for playground URL validation, parsing, and project creation
packages/create/playground.ts	Core implementation for playground functionality including URL validation, data download, and project setup
packages/create/package.json	Added export for playground module and cli-core dependency
packages/cli/commands/create.ts	Integrated playground functionality into the create command with user prompts and validation
.changeset/brown-comics-take.md	Added changeset entry documenting the new feature

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

packages/create/playground.ts

Co-authored-by: Copilot <[email protected]>

manuel3108 · 2025-08-23T17:08:04Z

I find it strange to have the "Template content" coming from a playground. Maybe +page.svelte should have ONLY <App />, nothing else ?

Agree, modified.

Maybe a default folder name could be proposed "svelte-playground-slug-name-of-playgound" ?

That would leave us to handle all that characters that cannot be directly translated into a directory name. Also, most of the repls I would personally download would have the name "Hello world (edited)" so I don't think this is super important. Can always be added later without any problems.

Maybe the readme.md could mention the origin of the playground ?

I understand, but I'm hesitant about this. Adding it near the top / somewhere in the middle is going to be hard, adding it at the end is easy, but probably nobody would notice. Would leave this open and wait for user feedback.

If some extra deps are needed, prompt it in CLI and add it to readme.md ?

Totally agree and implemented

The only major thing left is detecting and using the svelte version parameter from the playground url. And more testing. Let me know what you think about the code. Also if you have a 3-5 more real playground urls to test this again, that would be great.

Copilot

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

feat(cli): sv create --from-playground

58d39bf

manuel3108 added 4 commits August 15, 2025 16:15

properly download files

edb13ea

shit

55b9a85

add setup draft

fdb4e0c

add dependency handling

ecdf921

make it work

ae75f95

fix changesets

188c9e5

jycouet reviewed Aug 17, 2025

View reviewed changes

packages/create/playground.ts Outdated Show resolved Hide resolved

manuel3108 added 3 commits August 23, 2025 16:07

fix error handling

4053acd

fix +page.svelte content

033939f

make it more usable

50338b7

manuel3108 requested a review from Copilot August 23, 2025 16:57

Copilot AI reviewed Aug 23, 2025

View reviewed changes

packages/create/playground.ts Outdated Show resolved Hide resolved

Update packages/create/playground.ts

1eabc91

Co-authored-by: Copilot <[email protected]>

Copilot AI reviewed Aug 23, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

feat(cli): `sv create --from-playground` #662

feat(cli): `sv create --from-playground` #662

manuel3108 commented Aug 3, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented Aug 3, 2025 •

edited

Loading

Uh oh!

pkg-pr-new bot commented Aug 3, 2025 •

edited

Loading

Uh oh!

svelte-docs-bot bot commented Aug 3, 2025

Uh oh!

jycouet commented Aug 3, 2025 •

edited

Loading

Uh oh!

manuel3108 commented Aug 15, 2025

Uh oh!

jycouet commented Aug 15, 2025

Uh oh!

manuel3108 commented Aug 16, 2025

Uh oh!

jycouet left a comment

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

manuel3108 commented Aug 23, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

feat(cli): sv create --from-playground #662

Are you sure you want to change the base?

feat(cli): sv create --from-playground #662

Conversation

manuel3108 commented Aug 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot bot commented Aug 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

pkg-pr-new bot commented Aug 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

svelte-docs-bot bot commented Aug 3, 2025

Uh oh!

jycouet commented Aug 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

manuel3108 commented Aug 15, 2025

Uh oh!

jycouet commented Aug 15, 2025

Uh oh!

manuel3108 commented Aug 16, 2025

Uh oh!

jycouet left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

manuel3108 commented Aug 23, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

feat(cli): `sv create --from-playground` #662

feat(cli): `sv create --from-playground` #662

manuel3108 commented Aug 3, 2025 •

edited

Loading

changeset-bot bot commented Aug 3, 2025 •

edited

Loading

pkg-pr-new bot commented Aug 3, 2025 •

edited

Loading

jycouet commented Aug 3, 2025 •

edited

Loading