Drag CSS or JS file and drop it into html to create link or script tag


I lack the ability to drag and drop files from tree view over html to create <link> and <script> tags easily, with auto-injected path to files (such a thing is available in visual studio, dunno about other editors).

I think it’s really convenient as hell and I was surprised and disappointed that I can’t do that in Atom.

Maybe I miss something and there’s a package? I’ve tried to find one but I failed. Maybe developers would agree with me and implement such a feature?


This is something that I really want too. I know if you hover over the tab it displays the path.

You can see the blue bar displaying the path. I would love to be able to copy/past this path so that I can put it into the HTML as a link. Drag and drop would also be great.


You can click the file name in the status bar to get the path copied to the clipboard.


And what about drag&drop? Don’t you think it’s extremely convenient for images, stylesheets and scripts?


@onward777 asked about copy/pasting the path. Trying to be helpful, I mentioned a way that could be done.

Not particularly. I feel like drag & drop is time-consuming and imprecise much of the time. I use drag & drop when I’m attaching a file to an email, when I’m uploading a file here on the board or on Slack. But those are big huge drop targets. If I need a path that’s on my machine, I use autocomplete-paths. I just start typing and :boom: path is there.

On the flip side, I know plenty of people like drag & drop for lots of things. I don’t advocate against it. I want everyone to have the workflow that works best for them.


Where can I find the status bar and or is there a keyboard short cut to open it up. Sorry I’m just learning to code. I’m not familiar with any kind of text editor yet.


You can find it here:


Oh I found it. Thank you so much. That is going to save me so much time. :slightly_smiling:


I actually just registered an account to +1 for this feature. TextMate had this featured and I found it really helpful.


Truly this feature would be great also If Atom wants to attract Brackets and VS Code users some default debug tools would be nice also quick edit or quick docks


You can click the file name in the status bar to get the path copied to the clipboard.

That is very handy. Thanks!


I’ll love a feature like this…


this would be great indeed!


There’s a package called drop-up which supports drag-drop of images to MarkDown, HTML and CSS files. I guess this package could be extended or used as starting point to support JavaScript and StyleSheets too.


@rromerogar @yxfxmx I took a crack at implementing this since I also missed this feature coming from Visual Studio. You can find it at drag-relative-path.


Hi there, I found a temporary workaround. I am using php neon for eclipse and it comes with php, web and javascript views. If you work with three files, say, test.php, test.html and test.js you will have access to the features of each view. So, let’s say that you want to add a javascript to php, first you use the test.html template and the web view, position the mouse in the head, and select add script element from the right side panel. This is the closest I’ve come to save myself from writing all the javascript include bla bla bla thing. Then, copy the path in the script and add it as src=“your_path_for_the_js_file”

“lazyness is the mother of automation” Anonymous