# Feature request: initialize input cells from url query params

**URL:** <https://talk.observablehq.com/t/feature-request-initialize-input-cells-from-url-query-params/1122>\
**Category:** Uncategorized\
**Created:** [August 22, 2018, 12:30pm UTC](https://talk.observablehq.com/t/feature-request-initialize-input-cells-from-url-query-params/1122 "2018-08-22T12:30:57Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![RandomFractals](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/randomfractals/32/759_2.png) [@RandomFractals](https://talk.observablehq.com/u/RandomFractals)\
**Post date:** [August 22, 2018, 12:30pm UTC](https://talk.observablehq.com/t/feature-request-initialize-input-cells-from-url-query-params/1122/1 "2018-08-22T12:30:57Z")

</div>

I think it would be cool if we could initialize input cells from query params.

for example: [https://beta.observablehq.com/@mbostock/yarn-lock-visualizer?input=](https://beta.observablehq.com/@mbostock/yarn-lock-visualizer?input=)\<test\_lib\_yarn\_lock\_file\>

would just run @mbostock’s yarn-lock-visualizer for the lib you pass

---

<div class="post-metadata">

**Author:** ![bumbeishvili](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bumbeishvili/32/4220_2.png) [@bumbeishvili](https://talk.observablehq.com/u/bumbeishvili)\
**Post date:** [August 22, 2018, 4:21pm UTC](https://talk.observablehq.com/t/feature-request-initialize-input-cells-from-url-query-params/1122/2 "2018-08-22T16:21:36Z")

</div>

There is a workaround

```
https://beta.observablehq.com/@bumbeishvili/initialize-notebook-from-query-string-params?input=https://raw.githubusercontent.com/d3/d3/master/yarn.lock

```

> **[Initialize notebook from query string params](https://beta.observablehq.com/@bumbeishvili/initialize-notebook-from-query-string-params?input=https://raw.githubusercontent.com/d3/d3/master/yarn.lock)**
>
> An Observable notebook by David Bumbeishvili.

---

<div class="post-metadata">

**Author:** ![RandomFractals](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/randomfractals/32/759_2.png) [@RandomFractals](https://talk.observablehq.com/u/RandomFractals)\
**Post date:** [August 22, 2018, 4:27pm UTC](https://talk.observablehq.com/t/feature-request-initialize-input-cells-from-url-query-params/1122/3 "2018-08-22T16:27:01Z")

</div>

super! Thanks @bumbeishvili for putting that notebook together.

I’ve been wondering how we could easily override our input cells for links sharing.

this does it! would still like to have @system do it though by default just matching cells like urls to url query params on notebook load

🤗

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [August 23, 2018, 2:26pm UTC](https://talk.observablehq.com/t/feature-request-initialize-input-cells-from-url-query-params/1122/4 "2018-08-23T14:26:04Z")

</div>

We’ve fixed the `<base href>` of the page to include the query string, so here’s the shortest snippet I know of to parse the query string (using the convenient [URLSearchParams](https://developer.mozilla.org/docs/Web/API/URLSearchParams)):

```auto
params = new URLSearchParams(html`<a href>`.search)

```

The nice thing about this approach is that it’ll continue to work if you download and embed your notebook on another site, and it makes very few assumptions about the page.

Thanks for the suggestion @RandomFractals and a solution @bumbeishvili!

---

<div class="post-metadata">

**Author:** ![RandomFractals](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/randomfractals/32/759_2.png) [@RandomFractals](https://talk.observablehq.com/u/RandomFractals)\
**Post date:** [August 23, 2018, 2:29pm UTC](https://talk.observablehq.com/t/feature-request-initialize-input-cells-from-url-query-params/1122/5 "2018-08-23T14:29:32Z")

</div>

I like it! very elegant solution.

as always, much thanks!

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [August 23, 2018, 6:03pm UTC](https://talk.observablehq.com/t/feature-request-initialize-input-cells-from-url-query-params/1122/6 "2018-08-23T18:03:51Z")

</div>

For an array of values it seems one can pass `?c[]=1&c[]=2` in the query string and retrieve with `params.getAll("c[]")`.

---

<div class="post-metadata">

**Author:** ![pac02](https://avatars.discourse-cdn.com/v4/letter/p/a3d4f5/32.png) [@pac02](https://talk.observablehq.com/u/pac02)\
**Post date:** [December 16, 2021, 6:34am UTC](https://talk.observablehq.com/t/feature-request-initialize-input-cells-from-url-query-params/1122/7 "2021-12-16T06:34:43Z")

</div>

Here is how I’ve managed to put parameters in the URL : [How-to : Passing arguments in the url of the notebook / PAC / Observable](https://observablehq.com/@pac02/how-to-passing-arguments-in-the-url-of-the-notebook).

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [December 16, 2021, 12:06pm UTC](https://talk.observablehq.com/t/feature-request-initialize-input-cells-from-url-query-params/1122/8 "2021-12-16T12:06:26Z")

</div>

> [@Fil](#):
>
> For an array of values it seems one can pass `?c[]=1&c[]=2` in the query string and retrieve with `params.getAll("c[]")`.

No need for the awkward brackets (that’s a PHP thing). Just do `?c=1&c=2` and

```auto
new URL(document.baseURI).searchParams.getAll("c")

```