Forwarding Props with $$props and $$restProps
Pass all or remaining props through to an inner element or component.
Forwarding Props with $$props and $$restProps is a free Sveltejs Academy lesson on CoddyKit. This is lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Sveltejs Academy learning path, and your progress syncs across the web and the CoddyKit app. The Sveltejs Academy course includes 4 lessons in total.
Why Forward Props
Wrapper components often need to pass all received props to an inner element. Forwarding avoids listing every attribute.
The $$props Object
Inside a component, $$props is an object containing every prop passed to the component.
<script>
// $$props is auto-injected
</script>
<input {...$$props} />Including Unknown Props
Even props the component did not declare with export let are present on $$props.
The $$restProps Object
$$restProps excludes props you explicitly declared with export let. Useful for passing extras only.
<script>
export let label;
</script>
<input {...$$restProps} />Common Pattern
Declare the props you care about; forward the rest to the wrapped element.
<script>
export let label;
export let helpText;
</script>
<label>{label}</label>
<input {...$$restProps} />Pitfall: Order Matters
Spread first, then override with specific attributes if needed.
<input {...$$restProps} type="email" />Class Forwarding
Forward the class attribute via $$restProps for theming flexibility.
Style Forwarding
The style attribute and any data-* attributes flow through naturally too.
Event Handlers
Event listeners passed by the parent live in $$props as functions. Forwarding spreads them too.
Reactive Restrictions
$$props and $$restProps are slightly less efficient than declared props because Svelte cannot statically track them.
TypeScript Caveat
Both objects are loosely typed by default. Cast or augment them in TS for type-safe forwarding.
Quick Check
What is $$restProps?
Recap
Forward props with $$props (all) or $$restProps (extras only) using spread on the inner element.
Learn HTML with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 41
- Lessons
- 163
Frequently Asked Questions
Is the “Forwarding Props with $$props and $$restProps” lesson free?
Yes — the full text of “Forwarding Props with $$props and $$restProps” is free to read here on the web. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Sveltejs Academy course, upgrade to CoddyKit PRO. The Sveltejs Academy course includes 4 lessons in total.
What will I learn in “Forwarding Props with $$props and $$restProps”?
Pass all or remaining props through to an inner element or component. You practise Sveltejs Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Sveltejs Academy?
No prior experience is required. Sveltejs Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 4 of 4.
How long does the “Forwarding Props with $$props and $$restProps” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Sveltejs Academy lesson?
Yes. Every Sveltejs Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Declaring Props with export let
- Passing Props from Parent
- Default Prop Values
- Forwarding Props with $$props and $$restProps