# How to get preview in a separate window

**URL:** <https://discourse.processing.org/t/how-to-get-preview-in-a-separate-window/12924>\
**Category:** Beginners\
**Created:** [July 23, 2019, 6:21pm UTC](https://discourse.processing.org/t/how-to-get-preview-in-a-separate-window/12924 "2019-07-23T18:21:06Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kris1](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kris1/32/9385_2.png) [@Kris1](https://discourse.processing.org/u/Kris1)\
**Post date:** [July 23, 2019, 6:21pm UTC](https://discourse.processing.org/t/how-to-get-preview-in-a-separate-window/12924/1 "2019-07-23T18:21:06Z")

</div>

Hi-  
Very new user with a basic question-  
I would like the preview window to open in a separate window from the sketch editor.  
How do I do this?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 23, 2019, 6:28pm UTC](https://discourse.processing.org/t/how-to-get-preview-in-a-separate-window/12924/2 "2019-07-23T18:28:55Z")

</div>

What’s a preview window? Do you mean the running Sketch?

---

<div class="post-metadata">

**Author:** ![Kris1](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kris1/32/9385_2.png) [@Kris1](https://discourse.processing.org/u/Kris1)\
**Post date:** [July 23, 2019, 6:34pm UTC](https://discourse.processing.org/t/how-to-get-preview-in-a-separate-window/12924/3 "2019-07-23T18:34:07Z")

</div>

Yes. The window says preview but it is where the sketch is running

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 23, 2019, 6:42pm UTC](https://discourse.processing.org/t/how-to-get-preview-in-a-separate-window/12924/4 "2019-07-23T18:42:19Z")

</div>

> [@Kris1](#):
>
> the preview window to open in a separate window from the sketch editor.

it does exactly that. What do you mean?

Can you show your code or tell your operating system?

---

<div class="post-metadata">

**Author:** ![Kris1](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kris1/32/9385_2.png) [@Kris1](https://discourse.processing.org/u/Kris1)\
**Post date:** [July 23, 2019, 6:44pm UTC](https://discourse.processing.org/t/how-to-get-preview-in-a-separate-window/12924/5 "2019-07-23T18:44:45Z")

</div>

Ahhh, maybe it is not on some local host or something like that. I will keep going on this, and I am sure it will work out. Thanks for everyone’s patience. I just started learning today 🙂

---

<div class="post-metadata">

**Author:** ![Kris1](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kris1/32/9385_2.png) [@Kris1](https://discourse.processing.org/u/Kris1)\
**Post date:** [July 23, 2019, 6:51pm UTC](https://discourse.processing.org/t/how-to-get-preview-in-a-separate-window/12924/6 "2019-07-23T18:51:15Z")

</div>

I am on mac OS 10.11  
I am using the Pt.js web editor.  
Very basic beginners code

function setup() {  
createCanvas(1024,768);  
rect(10, 10, 1024, 768);  
ellipse(512, 300, 100, 100);

}

---

<div class="post-metadata">

**Author:** ![Kris1](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kris1/32/9385_2.png) [@Kris1](https://discourse.processing.org/u/Kris1)\
**Post date:** [July 23, 2019, 6:52pm UTC](https://discourse.processing.org/t/how-to-get-preview-in-a-separate-window/12924/7 "2019-07-23T18:52:20Z")

</div>

![40](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/58a720434a73e524e2ccafecda47b6ea9a739076.png)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 23, 2019, 6:52pm UTC](https://discourse.processing.org/t/how-to-get-preview-in-a-separate-window/12924/8 "2019-07-23T18:52:39Z")

</div>

ah, because your forum section was processing, not js

I just changed this

---

<div class="post-metadata">

**Author:** ![Kris1](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kris1/32/9385_2.png) [@Kris1](https://discourse.processing.org/u/Kris1)\
**Post date:** [July 23, 2019, 6:53pm UTC](https://discourse.processing.org/t/how-to-get-preview-in-a-separate-window/12924/9 "2019-07-23T18:53:22Z")

</div>

So the script window and preview window are attached and I would like the preview window to be floating so I can see the full thing without it cutting off.

---

<div class="post-metadata">

**Author:** ![Kris1](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kris1/32/9385_2.png) [@Kris1](https://discourse.processing.org/u/Kris1)\
**Post date:** [July 23, 2019, 6:54pm UTC](https://discourse.processing.org/t/how-to-get-preview-in-a-separate-window/12924/10 "2019-07-23T18:54:33Z")

</div>

Thank you. I am sorry for posting in the wrong place!

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [July 23, 2019, 8:41pm UTC](https://discourse.processing.org/t/how-to-get-preview-in-a-separate-window/12924/11 "2019-07-23T20:41:58Z")

</div>

I don’t believe you can separate the windows when you’re using Web Editor. What you could do however, although it’s a little bit of extra work, is setting up your own local server and run your p5 sketch locally from your computer (so instead of doing everything via the Web Editor). This requires the following steps:

1. Make sure you have a text editor, such as [Sublime Text](https://www.sublimetext.com/3) for Mac.

2. Make a folder on your computer with the files _index.html_, _style.css_, and _sketch.js_. You can copy-paste the content for these files from your Web Editor sketch. Click on the little arrow below the **play** button and you’ll see the three files.

3. Set up a local server using [one of these](https://github.com/processing/p5.js/wiki/Local-server) methods.

4. Open the files from step 2 in your text editor. Each time you edit one of the files, save it and the local server will instantly update your p5 website.

BAM! Fullscreen p5 sketches are now possible 🙂

---

<div class="post-metadata">

**Author:** ![Kris1](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kris1/32/9385_2.png) [@Kris1](https://discourse.processing.org/u/Kris1)\
**Post date:** [July 25, 2019, 1:50pm UTC](https://discourse.processing.org/t/how-to-get-preview-in-a-separate-window/12924/12 "2019-07-25T13:50:34Z")

</div>

Thank you! I am really grateful for your detailed answer. I am trying this now 🙂

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [July 28, 2019, 6:01pm UTC](https://discourse.processing.org/t/how-to-get-preview-in-a-separate-window/12924/13 "2019-07-28T18:01:05Z")

</div>

You can also use p5.js mode in the Processing PDE:

[https://processing.org/download/](https://processing.org/download/)

This launches sketches in their own browser tab, separate from the code IDE window.

---

<div class="post-metadata">

**Author:** ![Kris1](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kris1/32/9385_2.png) [@Kris1](https://discourse.processing.org/u/Kris1)\
**Post date:** [July 29, 2019, 7:52pm UTC](https://discourse.processing.org/t/how-to-get-preview-in-a-separate-window/12924/14 "2019-07-29T19:52:55Z")

</div>

Thank you @jeremydouglass! Will give that a try!